Question

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

JS

<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="" />

Answer 1

尝试类似：

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

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

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

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

Answer 3

在jquery中按id选择一个元素你使用“＃”+ id选择器。

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

Answer 4

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

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

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

Jquery淡化效果

4 个答案: