Question

我正在寻找一种解决方案，在我交换时为一些图像添加漂亮的淡入淡出效果。我是jquery的新手，已经看过许多解决方案，但只针对单个图像而不是多个图像。采用z-index技术，但将所有图像放在彼此的顶部。

我正在使用此jquery代码来交换图像。

$(document).ready(function(){



// jQuery image change on hover
$("ul#aside li a img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", src);

    });
});

非常感谢任何帮助或提示。

Answer 1

$("ul#aside li a img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
        var $this = $(this);
        $this.fadeOut("fast", function() {
          $this.attr("src", src).fadeIn("slow");
        });
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        var $this = $(this);
        $this.fadeOut("fast", function() {
          $this.attr("src", src).fadeIn("slow");
        });

    });
});

Answer 2

尝试这样的事情

  $(this).hide();
  $(this).attr("src", src);
  $(this).fadeIn();

.fadeOut()会淡出图片

为图像交换添加淡入淡出效果

2 个答案: