Question

在这个网站的标题中：http://www.ipallares.com我试图做一些图像交换，具有淡入淡出效果。它应该是非常简单的jQuery，但我得到一个奇怪的行为。我正在使用的代码是：

function changeImage(){
    var img_to_change   = Math.floor(Math.random()*99)+1
    var new_img = Math.floor(Math.random()*99)+1;
    var new_img_url = 'https://liv.s3.amazonaws.com/ipallares/images/header/'+new_img+'.jpg'; 
    jQuery("#img_"+img_to_change).fadeTo(300, 0.001, 
        function(){
            jQuery("#img_"+img_to_change).attr("src", new_img_url);
            jQuery("#img_"+img_to_change).fadeTo(500, 1);
        }
    );

    setTimeout("changeImage()", 1000);

}

我从一个目录中获取图像，其中有从1.jpg到100.jpg的图像。

在FF中，我看到（大多数情况下）原始图像淡出（实际上淡化为0.001）然后淡入（实际上淡化为1），然后变为新图像（图像应该更改一次当我使用'完整'函数回调时，原始已经完全消失为0.001。然后新图像调整大小，产生令人讨厌的效果。

在Chrome中，它的工作效果稍好一些，但仍然是随机的，完整的函数回调不能按预期工作。

我做错了什么？我是一个jQuery新手，但这很简单，jQuery应该是一个非常稳定的crossbrowser工具，不应该吗？

任何变通方法或建议均受到赞赏。

Answer 1

http://jsfiddle.net/fZPdy/13/

你应该设置将fadeIn设置为AFTER图像加载，否则你会闪烁。为此，您只需将fadeIn添加到load()事件：

$(this).load(function() { $(this).fadeIn(500); });

之后，您可以将来源设置为新图像。

Answer 2

试试这个解决方案：

<script type="text/javascript">
jQuery(document).ready(function($) {

//rollover swap images with rel 
  var img_src = "";
  var new_src = "";

    $(".img-swap").hover(function(){
      //mouseover

      img_src = $(this).attr('src'); //grab original image
      new_src = $(this).attr('rel'); //grab rollover image
      $(this).attr('src', new_src); //swap images
      $(this).attr('rel', img_src); //swap images

    },
    function(){
      //mouse out

      $(this).attr('src', img_src); //swap images
      $(this).attr('rel', new_src); //swap images
    });

  //preload images
    var cache = new Array();
    //cycle through all rollover elements and add rollover img src to cache array
    $(".img-swap").each(function(){
      var cacheImage = document.createElement('img');
      cacheImage.src = $(this).attr('rel');
      cache.push(cacheImage);
    }); 
});
</script>

... HTML代码应该是这样的：

<img src="original.jpg" rel="rollover.jpg" class="img-swap" />

使用淡入淡出效果交换图像时出现问题

2 个答案: