动画图像属性更改答案

【问题标题】：animate image attribute change动画图像属性更改
【发布时间】：2012-06-02 19:24:58
【问题描述】：

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

【问题讨论】：

标签： jquery hover jquery-animate mouseover attr

【解决方案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");
        });
    });

【讨论】：

上面这段代码先替换属性，然后淡出，然后在 . | 这里更好 $('#ch').fadeOut(140, function(){ $(this).attr('src','http://tinyurl.com/l3udnfd').fadeIn(140); fadoOut() 将函数作为第二个参数：example

【解决方案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));
};

【讨论】：