动画图像属性更改

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");
        });
    });