動畫圖像屬性更改

$(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主題的大多數頁面會出現一個旋轉木馬，我需要在任何轉盤更改任何圖像到一個新的ATTR當鼠標懸停這是老SRC + -bw或任何後綴。但是這需要補間或動畫。上面的代碼改變了圖像，但沒有動畫。還有很多人建議預加載懸停時顯示的圖像？動畫圖像屬性更改

來源

2012-05-28 gilesadamthomas

什麼樣的動畫你需要？衰退？

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

來源

2012-05-28 15:23:01

謝謝bram這是完美的！ – gilesadamthomas

@gilesadamthomas不客氣。 –

上面這段代碼先替換屬性，然後淡出，然後進入。 | **這裏是更好的**'$（ '＃CH'）淡出（140，函數（）{\t \t \t \t \t \t \t $（本）.attr（ 'src' 中，'HTTP：// TinyURL的。（fdoOut（）*函數作爲第二個參數：[示例]（http://jsfiddle.net/98y88mxj/） – animaacija

你需要做的淡入淡出，這裏解釋：

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

來源

2012-05-28 15:19:43 Herbert

動畫圖像屬性更改

回答

相關問題