jquery - 动画图像属性更改

Question

 $(function() {
    $(".flexslider img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");
            $(this).attr("src", src);
        });
    });

我有一个出现在 WordPress 主题的大多数页面上的轮播，当鼠标悬停在旧的 src + -bw 或任何后缀上时，我需要将任何轮播中的任何图像更改为新的 attr。但这需要补间或动画。上面的代码改变了图像但没有动画。还有很多人建议预加载要在悬停时显示的图像？

Answer 1

您需要什么类型的动画？褪色？

$(function() {
    $(".flexslider img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");                
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        });
    });