使用淡入淡出與jquery

我正在研究我的學生項目，我是新的jquery項目，我必須使用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); 
}); 
});

感謝您！

來源

2012-07-29 Maven

您想要訪問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'); 
    }); 
    }); 
});

來源

2012-07-29 23:01:19 Ohgodwhy

謝謝你的回覆，它的作品非常完美。 – Maven 2012-07-29 23:48:28

Maven，

您是否想過使用css webkit？本SO文章詳細介紹了淡入淡出的圖像 - 以不同的速率。 CSS Webkit Transition - Fade out slowly than Fade in

您還可以使用基本事件來淡入/淡出圖像。這個jQuery/SO的jsfiddle製品利用了this參考對象的：Jquery fadeOut on hover

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

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

〜JOL

來源

2012-07-29 22:54:49 JackOrangeLantern

個人意見，我會分層兩個圖像（CSS），所以非懸停版本通常在上面。然後在懸停功能中，添加一個$（this）.fadeOut（'fast'），以便顯示底層圖像。

來源

2012-07-29 22:57:22 jbehren

http://jsfiddle.net/Xm2Be/13/有一個例子，你如何能做到這一點。當然，你可以通過在括號內放置一些數字來設置淡入效果的長度。對於examlefadeToggle（5000）將有5秒的時間。

來源

2012-07-29 23:03:03

使用淡入淡出與jquery

回答

相關問題