问题与jQuery淡入效果

我想实现图片的淡入淡出效果，其中有图片1,2和3.当我淡入淡出图片的顺序时，淡入效果起作用。同时，如果我点击后退图片链接，例如图片3然后图片2.你将看不到淡入效果。不知道我在这里做了什么错误。问题与jQuery淡入效果

下面的代码：

<html> 
    <head> 
     <script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script> 
     <style type="text/css"> 
      #wrapper{ 
       width:400px; 
       height:300px; 
      } 

      .picture{ 
       width:400px; 
       height:300px; 
       position:absolute; 
      } 

      .button{ 
       background-color:red; 
       width:300px; 
       height:200px; 
      } 


     </style>  
     <script type="text/javascript">   
      function switchPicture(id){ 
       visible_image_id = jQuery("img:visible").attr("id"); 

       jQuery("#image_"+id).fadeIn(500,function(){ 
        console.log("visible -" + visible_image_id); 
        jQuery("#"+visible_image_id).hide(); 
       });    
      } 
     </script> 
    </head> 
    <body> 
     <div id='wrapper'> 
      <img id='image_1' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/lion__11.jpg"> 
      <img id='image_2' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/before_the_fall__39.jpg">         
      <img id='image_3' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/hot_august__97.jpg">             
     </div> 
     <div> 
      <a href="javascript:switchPicture(1);">Picture 1</a> 
      <a href="javascript:switchPicture(2);">Picture 2</a>    
      <a href="javascript:switchPicture(3);">Picture 3</a>       
     </div> 

    </body> 
</html>

在先进的感谢。

来源

2011-08-03 TonyTakeshi

你没有使用已经存在的bajillion jQuery插件之一的任何特定原因？ –

我为了自定义目的而构建它，发现它从头开始构建起来速度更快，但是陷入了这个问题。 – TonyTakeshi

我想这不是很快，当你不得不停止和排除故障。 – Sparky

你有一个Z指数的问题。问题是，如果你说，显示图像2与图像3已经显示。图像3位于图像2的前方，因此在隐藏图像3之前您不会看到图像2。 3在淡入淡出完成后才会隐藏。你可以通过设置图像的z-index来解决这个问题。

function switchPicture(id) { 
    visible_image_id = jQuery("img:visible").css("zIndex", 0).attr("id"); 

    jQuery("#image_" + id).fadeIn(500, function() { 
     console.log("visible -" + visible_image_id); 
     jQuery("#" + visible_image_id).hide(); 
    }).css("zIndex", 1); 
}

http://jsfiddle.net/7kQWG/

编辑：一些额外的改进。理想情况下，您应该删除href中的inline javascript，并用click处理程序替换它。事情是这样的：

http://jsfiddle.net/7kQWG/1

另外请注意，我说if(visible_image_id == new_image_id) return false;。如果你点击了可见图像的链接，这将修正它隐藏图像的错误。

要获得额外的奖励积分，您可以使用URL替换为无javascript页面的href。这样，如果用户没有启用JavaScript，他们将被带到该页面，但如果JavaScript的预期行为将发生。

来源

2011-08-03 03:02:15

投了票，删除了我的答案，但是如果你可以把它变成一个点击处理程序并摆脱内联函数调用，那将非常可爱。 – karim79

@kingjiv，这是人生的救星！我认为它可能是订购问题，但你已经精确地展示了它。非常感谢！ – TonyTakeshi

@ karim79好吧，只为你！ http://jsfiddle.net/7kQWG/1/我还修复了连续两次点击同一链接的问题。 –