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 或任何后缀。但这需要补间或动画。上面的代码改变了图像，但没有动画。还有很多人建议预加载要在悬停时显示的图像？

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

Answer 2

你需要做一个交叉淡入淡出，这里解释：

http://jqueryfordesigners.com/image-cross-fade-transition/

你可以这样做：

crossFade = function(element, to_src) {
   element = $(element); //maybe this isn't even needed.
   element.style = "display: block; position: absolute; top:0; left:0;"; //please replace this with four .css() calls ;) and double check the positioning
   parentElement = $(element.parentNode);
   newElement = $("<img/>", {
      src: to_src,
      style: "display: none; position: absolute; top:0; left:0;"
   }
   newElement.appendTo(parentElement);
   //please check in your dom if both images are in the carrousels-list-node, as I might have errored ;)
   newElement.fadeIn(5000, (function(el) {  return function() { el.remove(); }; })(element));
};