jQuery淡入淡出效果答案

【问题标题】：Jquery fade effectjQuery淡入淡出效果
【发布时间】：2011-10-16 06:23:47
【问题描述】：

我需要一些 jquery 帮助。我有一个简单的图片库，我想添加一些 jquery 效果（特别是淡入/淡出 #actimg 中的图像）。请记住，我对 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="" />

【问题讨论】：

那里没有裸体女孩 :) ......只有时尚和东西的图片库。

标签： jquery fade effect

【解决方案1】：

尝试类似：

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

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

【讨论】：

【解决方案2】：

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);

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

【讨论】：

这似乎是我想要达到的效果，但是现在当我点击一些图像时，我可以在它闪烁/消失之前看到这个图像。附言。（我使用的是最新的 jquery 1.6.2）
啊是的我以前也遇到过这个问题，我解决它的方法是添加一个超时来更改图像的来源，请参阅上面的编辑
使用 setTimeout 来解决这个问题是相当骇人听闻的......你为什么不看看其他不太复杂的答案，效果更好。
另外，如果你已经在使用 jQuery，使用“document.getElementById”有点傻。

【解决方案3】：

在 jquery 中通过 id 选择元素你使用“#”+id 选择器。

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

【讨论】：

【解决方案4】：

ShankarSangoli 的回答看起来很棒。但是，如果您希望显示的图像在新图像消失之前消失，这是一个很棒的效果，请执行以下操作：

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

这利用了fadeOut 上的回调。动画完成后调用回调。

【讨论】：