javascript - 为悬停脚本上的jQuery图像替换添加淡入淡出效果

Question

已经有一些关于此的主题，但它们对我的情况并没有太大帮助。我写了一个小脚本来改变一些社交图标在悬停时的图像源。我正在尝试添加一个淡入淡出效果，因此它不仅仅是一个直接的图像交换。这是我的脚本：

$(".social_icons").live('hover', function() {
  if ($(this).attr("class") == "social_icons") {
    this.src = this.src.replace("-black","-color");
  } else {
    this.src = this.src.replace("-color","-black");
  }
  $(this).toggleClass("on");
});

如何为此添加淡入/淡出效果？

Answer 1

试试这个

$(".social_icons").live('hover', function() {
    var $curr = $(this);
     if ($(this).attr("class") == "social_icons") {
        $curr.fadeOut('slow', function () {
            $curr.attr('src', this.src.replace("-black","-color"));
            $curr.fadeIn('slow');
        });
    } else {
        $curr.fadeOut('slow', function () {
            $curr.attr('src', this.src.replace("-color","-black"));
            $curr.fadeIn('slow');
        });
  }
  $(this).toggleClass("on");
});