jQuery的懸停及移出.animate

這裏是我的代碼： http://jsfiddle.net/FUnhK/jQuery的懸停及移出.animate

$(document).ready(function(){ 
    $("img").hover(function(){ 
     var text = $(this).attr("alt"); 
     $("h2").text(text); 
    }); 
    $("img").mouseout(function(){ 
     $("h2").html("Basic Text"); 
    }); 

});

我需要的是懸停（）和鼠標移開動畫（）函數，所以每當我將鼠標懸停在圖像之一，它顯示文本，並且每當鼠標離開圖像區域時，它就會顯示「基本文本」（如上述代碼所示）。它看起來應該是這樣的： http://jsfiddle.net/xgyaQ/ 但是正如你所看到的，我僅僅爲了演示的目的而添加了animate（{opacity：'toggle'}）函數，而且它沒有像應該那樣工作。

我只需要具有第二個動畫效果的第一個代碼的功能，我不知道如何編寫javascript來實現這一點。

還有一件事 - 任何想法，我應該改變什麼，所以基本文本不會顯示時，懸停在圖像之間的空白空間，因爲當你懸停形成一個圖像到另一個它看起來不酷。

謝謝！

P.S. 好，感謝Liquinaut我把它與淡入效果的工作，但第一隱藏元素：

$(document).ready(function() { 
    $("img").mouseenter(function() { 
     var text = $(this).attr("alt"); 
     $("h2").text(text).hide().fadeIn(400); 
    }); 
    $("ul").mouseleave(function() { 
     $("h2").text('Basic Text').hide().fadeIn(400); 
    }); 
});

http://jsfiddle.net/FUnhK/3

這就是我一直在尋找的效果。有沒有更好的方法來實現它？

來源

2013-02-12 pres

這可能是你需要什麼，根據你的HTML/CSS：

$(document).ready(function() { 
    $("img").mouseenter(function() { 
     var text = $(this).attr("alt"); 
     $("h2").text(text); 
    }); 
    $("ul").mouseleave(function() { 
     $("h2").text('Basic Text'); 
    }); 
});

你應該想想重建你的CSS的部分儘管如此，帶有絕對定位的圖像元素的浮動列表元素是沒有意義的。

CYA， Liquinuat

來源

2013-02-12 13:48:34 Liquinaut

感謝，真正解決了我的第二個問題，但什麼動畫？ – pres 2013-02-12 14:01:44

我覺得這個樣本是好的

$(item).hover(function() { ... }, function() { ... }); 
In your case: 

    $("a.button").hover(
     function() { 
      $(this).animate({"marginTop": "0px"}, "fast"); 
     }, 
     function() { 
      $(this).animate({"marginTop": "16px"}, "fast"); 
     } 
    );

來源

2013-02-12 13:34:24

jQuery的懸停及移出.animate

回答

相關問題