jquery.fadeout問題在FireFox 6.0中

到目前爲止，我有fadeIn工作，但fadeOut並不完全正確。現在，只要鼠標離開懸停區域，它看起來就沒有任何fadeOut正在發生。我希望在下一個動畫（下一個fadeIn）開始並且不排隊之前完成平滑淡出。基本上這是通過<span>標籤中的一些鏈接。非常感謝所有迄今爲止幫助過我的人。我現在正在家中！jquery.fadeout問題在FireFox 6.0中

P.S.我知道我沒有使用.hover。我寧願堅持mouseover和mouseleave現在，甚至mouseout。請容納這個小的請求。

<script> 
    $("a").mouseover(function() { 
     $("div").fadeIn(0, function() { 
      $("span").fadeIn(3000,0.0); 
     }); 
     return false; 
    }); 

    $dequeue; 

    $("a").mouseleave(function() { 
     $("span").fadeOut(3000,0.0); 
    }); 
</script> 


<!DOCTYPE html> 


<html> 
<head> 
<script type="text/javascript" src="jQuery.js"></script> 
</head> 
<body> 

<a href="#">MouseOver!</a> 

<div> 

<h3><span>Sample Text</span></h3> 

</div> 
</body> 
</html>

編輯：08/18/2011

我意識到有可能是腳本上面的一個衝突。我有一個額外的jquery腳本在同一頁面上運行。本身它工作正常，但是當我爲文本框添加腳本（上圖）時，圖像和文本上的.fadeOut會被忽略或至少不一致。

第二jQuery腳本：

<script> 
$(document).ready(function(){ 

$(".latest_img").fadeTo("slow", 0.0); 
$(".latest_img").hover(function(){ 
$(this).fadeTo(1000, 1.0).dequeue(); 

},function(){ 
$(this).fadeTo(1000, 0.0).dequeue(); 
}); 
}); 
</script>

以下是對應提示的文本和圖像來顯示四個「目標」中的一個例子（有伴隨四象四個文本框 - 每個得到由示出在目標上的鼠標懸停）。

HTML：

<div class="gallerycontainer"> 
<div width="100%" height="30%"> 

<a class="thumbnail" href="#thumb"><h2 class="ftb" id="tg1">Target A</h2> 

<span class="txspan"> 
<img src="img/ima.jpg" class="latest_img" id="images" /> 
<h3 class="text"><br>Textbox content for Target A</h3></span></a> 

</div> 
</div>

來源

2011-08-18 Scott

什麼是$ dequeue; ？如果它沒有定義你可能會讓你傷心。 – Fresheyeball

@Fresheyeball它從這裏http://api.jquery.com/jQuery.dequeue/我想我錯誤地使用它。 – Scott

SAN的$dequeue兩個事件似乎工作

http://jsfiddle.net/pxfunc/y9qd6/

$("a").mouseover(function() { 
    $("div").fadeIn(0, function() { 
     $("span").fadeIn(3000, 0.0); 
    }); 
    return false; 
}); 

// remove $dequeue 

$("a").mouseleave(function() { 
    $("span").fadeOut(3000, 0.0); 
});

編輯：

http://jsfiddle.net/pxfunc/y9qd6/

var $a = $('a'), 
    $div = $('div'), 
    $span = $('span'); 

$a.mouseover(function() { 
    $div.show(); 
    $span.fadeIn(1000); 
}).mouseleave(function() { 
    $span.stop(true, true).fadeOut(1000); 
});

這個工作應該像你要找的span衰落早在之前完全淡出。

來源

2011-08-18 03:03:30 MikeM

是的。它似乎在我的例子中工作，但它不起作用在我的頁面上。（出隊應該是把動畫從隊列中移出來，這樣動畫就不會堆積起來了，因爲它不適用於我，所以它還沒有解決我的問題。 – Scott

@Scott，你可以在調用fade方法之前['.stop（）']（http://api.jquery.com/stop/）淡入淡出的動畫，這樣它們就不會疊加類似'$（'span'）的東西。stop true，true）.fadeIn（3000，0.0）;' – MikeM

停止.stop會不會完全停止動畫？這就是fadeOut似乎正在發生的事情。 – Scott

您不必使用dequeue。使用stop()代替：

$("a").mouseover(function() { 
    $("div").fadeIn(0, function() { 
     $("span").fadeIn(3000,0.0); 
    }); 
}); 

// using ".stop()" will stop the previous animation, and immediatly fade it out 

$("a").mouseleave(function() { 
    $("span").stop().fadeOut(3000,0.0); 
});

來源

2011-08-18 03:11:17

謝謝，但它沒有解決這個問題。我已經嘗試了一些修補程序，包括添加背景色和使用fadeTo而不是fadeIn和fadeOut。到目前爲止沒有任何工作。 – Scott

然後我不確定我完全理解你想要完成什麼。你可以嘗試更清楚地解釋它嗎？ –

的文檔準備事件
內部發生everyting刪除$出隊。
前淡入的添加停止（真，真）和淡出的

 $(document).ready(function() { 
    $("a").mouseover(function() { 
     $("div").stop(true, true).fadeIn(0, function() { 
      $("span").fadeIn(3000,0.0); 
     }); 
     return false; 
    }); 

    //$dequeue; 

    $("a").mouseleave(function() { 
     $("span").stop(true, true).fadeOut(3000,0.0); 
    }); 
});

來源

2011-08-18 03:18:53 BrainSpills

順便說一下，您可能需要考慮使用mouseenter和mouseleave，以便該事件僅觸發一次 - 當光標進入錨點並離開它時。 – BrainSpills

雖然在單獨的SCRIPT標記中，但我上面有一個之前的jQuery語句。當我使用document.ready語句時，這個動畫不能運行，所以我把它拿出來了。 – Scott

是的，我目前使用的是mouseenter和mouseleave。我必須從先前的迭代中拉出這個例子。不過，其他一切都是一樣的。 – Scott

$離隊是錯誤的語法。它需要$ .dequeue並傳遞一個元素，例如$ .dequeue（elem）。此外，您並未使用隊列統計信息，因此出隊是不合適的。 stop（）對於兩個淡入淡出都是明智的。不需要傳遞任何參數來停止（）默認應該工作正常。

來源

2011-08-18 03:19:37 Fresheyeball

jquery.fadeout問題在FireFox 6.0中

回答

相關問題