0

次のコードがあります。

$(document).ready(function () {

$("#full-btns").children().delay(4000).fadeOut("slow");

$('#full-btns').hover(function() {
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() {
        $("#full-btns").children().fadeOut("slow");

});

ページが読み込まれると、#full-btnsフェードアウトする前に要素が 4000 ミリ秒表示されます。私が抱えている問題は、ユーザーがまだ表示されている間に要素にカーソルを合わせると、ホバーで呼び出される#full-btnsため、要素がフェードアウトすることです。ホバーしたときに常に表示されるようにし$("#full-btns").children().fadeOut("slow");たい。#full-btns

ページが読み込まれたら、赤い div にカーソルを合わせて、フェードアウトする方法に注目してください。それは望ましくありません。赤い div にカーソルを合わせると (表示されている間)、表示されたままになります。

更新: http://jsfiddle.net/gazedge/nhBBc/ (現在、ソリューションが含まれています)

4

3 に答える 3

0

私が質問を誤解していなければreturn false;、イベントがバブリングするのを防ぐために、ホバーコールの最後にできませんか？

http://www.quirksmode.org/js/events_order.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

于 2012-11-20T23:06:54.640 に答える
0

あなたがしなければならない唯一のことは、誰かがホバリングする前にすべてのアニメーションをクリアすることです。

$("#full-btns").children().delay(4000).fadeOut("slow");

    $('#full-btns').hover(function() {
        $('#full-btns').children().stop(true, true);  // Stop the fade-out animation
          $('#full-btns').children().stop().animate({opacity:'100'});
          $('#full-btns').children().show();

    }, function() {
        console.log('fadeOout called');
            $("#full-btns").children().fadeOut("slow"); 


    });​

http://jsfiddle.net/nhBBc/5/

注： 初めてホバーして（コード内で）divがフェードアウトするのは、 $（ "＃full-btns"）。children（）。fadeOut（ "slow"）;が原因ではありません。しかし、それはあなたが適用した以前のアニメーションを完成させているだけだからです。[あなたの1行目]。

于 2012-11-21T09:10:15.033 に答える
0

setInterval と clearInterval を使用します。

$('#full-btns').hover(function() {

      clearInterval(refreshIntervalId);        
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() { 
        $("#full-btns").children().fadeOut("slow");            
});

var refreshIntervalId = setInterval(function() {
     $("#full-btns").children().fadeOut("slow");
}, 4000);

</p>

于 2012-11-20T23:32:02.560 に答える