使用JQuery的鼠標懸停效果和隊列

我一直在尋找過去幾個小時如何做到這一點 - 無法找到任何地方。使用JQuery的鼠標懸停效果和隊列

我有幾個按鈕（div）。它由一個div內的div組成。父div具有正常的按鈕背景圖像，孩子的背景圖像較亮。在Mouseover上，我希望子div轉到1.0的不透明度，然後淡出到0.2（因此它看起來像閃光燈）。在MouseOut上，它只需要回到0.0。顯然我不希望MouseOver/MouseOut隊列堆積。

我看着隊列效果，但我無法弄清楚如何讓它與MouseOver按鈕一起工作。另外我吮吸JS。

來源

2009-12-08 Jared

您應該使用的mouseenter和鼠標離開。當光標移動到元素內時，mouseover和mouseout事件不斷髮射。

$(".button") 
    .mouseenter(function() { 
     var overlay = $("div:first",this).fadeTo(350, 1.0, function() { 
      overlay.fadeTo(350, 0.2); 
     }); 
    }) 
    .mouseleave(function() { 
     $("div:first", this).stop().fadeOut(350); 
    });

來源

2009-12-08 20:00:48 joshperry

嗯不能得到那個工作？父母的名字是ButtonBG，孩子是ButtonBGanim，所以我但#ButtonBG你的.button是......不行。 – Jared 2009-12-08 20:07:15

會發生什麼情況？錯誤？你有螢火蟲或任何JavaScript的調試器安裝？ – joshperry 2009-12-08 21:43:42

你看過fadeTo方法嗎？ http://jquery.bassistance.de/api-browser/#fadeToStringNumberNumberFunction

應該是這樣的（沒有測試過，雖然）

var childdiv = $("#childdiv"); 
childdiv .fadeTo(500, 1.0, function(){ 
    childdiv .fadeTo(500, 0.2); 
});

來源

2009-12-08 19:42:38

關鍵是將第二個淡入淡出放入第一個淡入淡出的回調中。 – 2009-12-08 19:44:12

問題是哈弗具有作爲很好，我覺得我越來越糊塗...

地址，稱爲ButtonBGanim股利：

$(document).ready(function(){ 

var buttonbg = $("#ButtonBGanim"); 

$(buttonbg).hover(
function() { 
$(this).stop().fadeTo(500, 1.0, function(){ 
    buttonbg .fadeTo(500, 0.2); 
}, 
function() { 
$(this).stop().fadeTo(500, 0.0) 
});

來源

2009-12-08 20:00:33 Jared

未經測試但應該非常接近。

$("#id").hover(
     function() { 
    $(this).stop().children("div").fadeTo("fast", 1.0).fadeTo("slow", 0.2); 
     }, 
     function() { 
     $(this).stop().children("div").fadeTo("slow", 0.0); 
     } 
    );

來源

2009-12-08 20:07:16 corymathews

使用JQuery的鼠標懸停效果和隊列

回答

相關問題