1

在此站点的标题中：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 应该是一个非常稳定的跨浏览器工具，不是吗？

非常感谢任何解决方法或建议。

4

2 回答 2

0

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

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

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

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

于 2013-08-14T16:14:39.953 回答
0

试试这个解决方案：

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

于 2014-05-27T10:07:41.543 回答