在jquery中使用淡入/淡出

Question

我正在研究我的學生項目，我是新的jquery，對於該項目，我必須使用jquery來增強一些功能，並且我學到很多知識來執行基本任務，但是我對一些非常令人困惑的東西感到困惑。

我的一個腳本實際上將鼠標懸停在功能上時更改了div容器的圖像，該功能目前還不錯，但讓它感覺有些漂亮。我想通過淡入淡出功能或通過動畫來為其添加過渡效果，但是無法工作兩者兼而有之。 我通過互聯網搜索，但在這里我無法將這些示例與我聯系起來。

我只想知道在此代碼中可以在哪里插入淡入淡出或動畫功能，以使其具有過渡效果：

$(document).ready(function () {
$(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).attr("alt", $(this).attr("src"));
    $(this).attr("src", dummyImg);
}, function () {
    var dummyImg = $(this).attr("src");
    $(this).attr("src", $(this).attr("alt"));
    $(this).attr("alt", dummyImg);
});
});

謝謝！

Answer 1

您要訪問fadeIn和fadeOut函數的回調函數，這將使您可以更改src圖像，而不能更改。 它看起來像這樣->

$(document).ready(function () {
  $(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("alt", $(this).attr("src"));
      $(this).attr("src", dummyImg);
      $(this).fadeIn('slow');
    });
  }, function () {
    var dummyImg = $(this).attr("src");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("src", $(this).attr("alt"));
      $(this).attr("alt", dummyImg);
      $(this).fadeIn('slow');   
    });
  });
});

Answer 2

Maven，

您是否考慮過使用CSS Webkit？ 這篇SO文章詳細介紹了以不同速率進行淡入淡出圖像的方法。 CSS Webkit過渡-淡入比淡入慢

您還可以利用基本事件淡入/淡出圖像。 這篇JQuery / JSFiddle SO文章使用了this參考對象： 懸停時Jquery fadeOut

JSFiddle.net文檔中的基本淡入/淡出結構如下：

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

〜JOL

Answer 3

就個人而言，我會將兩個圖像（css）分層，因此非懸停版本通常位於頂部。 然后在懸停功能中，添加$（this）.fadeOut（'fast'）以便顯示基礎圖像。

Answer 4

http://jsfiddle.net/Xm2Be/13/有一個示例，您可以如何做。 當然，您可以通過在括號內放置一些數字來設置淡入淡出效果的長度。 例如，.fadeToggle（5000）的計時時間為5秒。