jquery淡入淡出效果

我需要一些jQuery的帮助。我有一个简单的图像库，我想添加一些jquery效果（特别是淡入/淡出#actimg中的图像）。请记住，我不是很熟悉jQuery。jquery淡入淡出效果

<script type="text/javascript"> 
function showPic (whichpic) { 
    if (document.getElementById) { 
    document.getElementById('actimg').src = whichpic.href; 
    return false; 
} else { 
    return true; 
} 
} 
</script>

和身体

<ul> 
<li><a onclick="return showPic(this)" href="images/girl_01.jpg"><img height="50px" width="50px" src="images/girl_01.jpg" /></a></li> 
<li><a onclick="return showPic(this)" href="images/girl_02.jpg"><img height="50px" width="50px" src="images/girl_02.jpg" /></a></li> 
<li><a onclick="return showPic(this)" href="images/girl_03.jpg"><img height="50px" width="50px" src="images/girl_03.jpg" /></a></li> 
</ul> 

<img id="actimg" src="images/girl_04.jpg" alt="" />

来源

2011-07-29 Madr

什么是你想怎么办？ –

那里没有裸体女孩:)只是与时尚和东西的图像库。 – Madr

function showPic (whichpic) { 
    if (document.getElementById) { 
    $('#actimg').fadeOut('slow'); 
    document.getElementById('actimg').src = whichpic.href; 
    $('#actimg').fadeIn('slow'); 
    return false; 
} else { 
    return true; 
} 
}

我已经加入周围的线两条线，你改变#actimg img标签的来源。在一个之前衰#actimg出和一个刚过变淡它放回

---- ----编辑

变化：

$('#actimg').fadeOut('slow'); 
    document.getElementById('actimg').src = whichpic.href; 
    $('#actimg').fadeIn('slow');

到：

$('#actimg').fadeOut(250); 
    setTimeout(function() { 
     document.getElementById('actimg').src = whichpic.href; 
     $('#actimg').fadeIn(250); 
    }, 250);

这将fadeOut #actimg元素，然后它将更改该元素的来源和淡入元素。请注意，fadeOut持续时间应该等于或小于超时的持续时间，以便在图像源更改之前完成淡入淡出。

来源

2011-07-29 20:44:42 Jasper

这看起来像是Id想要达到的效果，但现在当我点击某个图像时，我可以在它闪烁/淡入之前看到此图像。 ps。（我正在使用最新的jQuery 1.6.2） – Madr

啊是的我以前也有过这个问题，我的方式是增加一个超时改变图像的来源，看到我的编辑 – Jasper

是的，谢谢你非常非常漂亮，现在完美。 – Madr

在jQuery中通过id选择一个元素，你使用“＃”+ id选择器。

function showPic (whichpic) { 
    $('#actimg').attr("src", whichpic.href).hide().fadeIn(); 
}

来源

2011-07-29 20:45:44 ShankarSangoli

ShankarSangoli的回答看起来不错。但是，如果你想显示的图像消失了新一消失之前，这是一个真棒效果，这样做：

function showPic(whichPic) { 
    $('#actimg').fadeOut('fast', function() { 
    $('#actimg').attr('src', $(whichPic).attr('href')); 
    $('#actimg').fadeIn('fast'); 
    }); 
}

这需要在淡出回调的优势。回调在动画完成后调用。

来源

2011-07-29 20:48:41 tybro0103

尝试类似：

$("li a").click(function(){ 
     $("#actimg").fadeOut(); 
     var imghref = $(this).attr("href"); 
     $("#actimg").attr("src",imghref); 
     $("#actimg").fadeIn();

} 和摆脱你的showpic功能...

来源

2011-07-29 20:49:30 Evan

jquery淡入淡出效果

回答

相关问题