爲什麼它不起作用，如果我用fadeToggle替換fadeIn/fadeOut

我有兩個相同的jsfiddles，後者被替換爲fadeIn/fadeOut而不是fadeToggle。爲什麼它不起作用，如果我用fadeToggle替換fadeIn/fadeOut

用鼠標只要移動進出速度快，並保持最後一刻上的黃色盒子，等待，紅色元素不會褪色。

怪異。任何人都有解釋嗎？

$(document).ready(function(){ 
     $(".box1").mouseenter(function(){ 
     $('.box2').stop(true, false).fadeToggle(1500); 
     }); 
     $(".box1").mouseleave(function(){ 
     $('.box2').stop(true, false).fadeToggle(1500); 
     }); 
    });

和

http://jsfiddle.net/q6d57/6/（不工作）

$(document).ready(function(){ 
    $(".box1").mouseenter(function(){ 
    $('.box2').stop(true, false).fadeIn(3000); 
    }); 
    $(".box1").mouseleave(function(){ 
    $('.box2').stop(true, false).fadeOut(3000); 
    }); 
});

來源

2013-11-27 thenewseattle

兩個小提琴做工精細我使用Chrome Win7上的...什麼是應該發生什麼實際上是在發生？ –

兩者都適合我... Mac上的Safari。 – Charlie74

都在爲我工作 – Sico

變化的jQuery版本2.0.2

來源

2013-11-27 23:34:20 Sico

我相信我的回答是正確的 - 但jQuery在2.0.2中變得更加智能。好的趕上！ –

好抓！哇！ – thenewseattle

很高興我能幫到你 – Sico

甲我首先感到有點困惑，但是我想在Chrome調試器中玩弄一段時間，然後看看fadeIn,fadeOut,& fadeToggle運行它的過程中，我會冒險進行一次有教育的猜測。

看起來好像是什麼jQuery與fadeIn一起檢查html元素的display屬性。如果display爲none，fadeIn通過設置display到block和漂流opacity從0到1。所以在你的代碼，當你移動你的鼠標離開並返回衰對象，它停止fadeOut但是由於display仍block，fadeIn未能生效。

但是，fadeToggle是有點聰明，檢查opacity而不僅僅是display屬性。它不僅檢查opacity，但可能會保留一個標誌，上一次執行淡入淡出（進入或未出），因此它知道要做另一個淡入淡出。

這是所有有點傳聞，沒有深入jQuery庫，但我相信這是唯一可能發生在Chrome的真棒調試器後，發生;）。

來源

2013-11-27 23:29:15

問題是，您正在使用fadeIn/Out與非隱藏的元素。這就是爲什麼您需要添加.hide（）才能使其工作。

檢查此琴：

http://jsfiddle.net/q6d57/10/

$(document).ready(function(){ 
    $(".box1").mouseenter(function(){ 
    $('.box2').stop(true, false).hide().fadeIn(3000); 
    }); 
    $(".box1").mouseleave(function(){ 
    $('.box2').stop(true, false).hide().fadeOut(3000); 
    }); 
});

來源

2013-11-27 23:31:40

只保存了小提琴並更新了鏈接。 –

爲什麼它不起作用，如果我用fadeToggle替換fadeIn/fadeOut

回答

相關問題