动画图像属性更改

gil*_*mas 1 jquery mouseover hover attr jquery-animate

 $(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);
        });
    });
Run Code Online (Sandbox Code Playgroud)

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

Bra*_*roy 5

您需要哪种动画?衰退?

$(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");
        });
    });
Run Code Online (Sandbox Code Playgroud)