web-dev-qa-db-ja.com

Jquery Stop Fadein / Fadeout

これはかなり簡単な方法ですが、理解できないようです。

基本的に私はdivにフェードインし、ホバー時に他をフェードアウトするjqueryホバーを持っています。

数回すばやくオンとオフを繰り返すと、約3〜4秒間脈動して、すべてのフェードイン/フェードアウトが終了します。

私は通常、これらのことを.stop（）で停止しますが、ここではうまくいかないようです。 an` $（ "。txtWrap"）。stop（）。hover（）の前にボタンから移動した場合、フェードインを強制終了するにはどうすればよいですか。

$(".txtWrap").stop().hover(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)
javascriptjqueryhover
25
wesbos

stop()が間違っています。

これを試して：

_$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().fadeOut();
    $(this).find('.txtDesc').fadeIn();
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').stop().fadeOut();
  }
)
_

編集：

これにより、要素を非表示にすることなく、要素の不透明度がアニメーション化されます。それらを非表示にする場合は、.hide()を使用します。アニメート関数にコールバックを追加する必要があります。

_$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().animate({opacity:0}, 500);
    $(this).find('.txtDesc').animate({opacity:1}, 500);
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').animate({opacity:1}, 500);
    $(this).find('.txtDesc').stop().animate({opacity:0}, 500);
  }
)
_
28
user113716

これらの回答がどれも私にとってうまくいかなかったので、私はこれを投稿すると思いました。

*真のパラメータは、キューをクリアしてアニメーションの最後に移動するようにストップに指示します

$(".txtWrap").stop().hover(
  function () {
    $(this).find('.txtBock').stop(true, true).fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').stop(true, true).fadeOut();
  }
)

リンク： http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue

18
Daniel M.

このような場合には、ブライアンチャーンの天才に目を向けます .hoverIntent() plugin -非常にスムーズです...実行する前にユーザーが十分にスローダウンするまで待機します。必要に応じて構成できます。

プラグインを含めて（十分短いため、スクリプトファイルに直接配置することもあります）、Wordを追加しますIntent：

$(".txtWrap").hoverIntent(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)
8
brandonjp

スーパーインテリジェントSO検索エンジンがこの質問を強調してくれたとき、私は同様の質問を投稿しようとしていたので、後世のための独自のソリューションを投稿したいと思いました。

私はuser113716の解決策を取り、少し具体化しました。私の場合、非表示にして表示していたdivは_display:none_として始まったので、CSSに_opacity:0_を追加し、アニメーションを開始する前にjQueryに.css({display:block})を設定するように指示する必要がありました。不透明度を_1_にフェードインします。

フェードアウトでは必要ありませんでしたが、不透明度をゼロにアニメーション化した後、.hide() divにコールバックを追加しました。

これが私が最終的に何をしたのかを説明するフィドルです：

http://jsfiddle.net/mblase75/wx2MJ/

関連するJavaScript：

_$('li').mouseover(function() {
    $(this).addClass('hover');
    $('#' + $(this).data('divid')).stop().css({
        display: 'block'
    }).animate({
        opacity: 1
    }, 500);
});

$('li').mouseout(function() {
    $(this).removeClass('hover');
    $('#' + $(this).data('divid')).stop().animate({
        opacity: 0
    }, 500, function() {
        $(this).hide();
    });
});
_
1
Blazemonger

あなたがこれを持っているなら：

$("#frase1").fadeIn(5000, function(){
   $("#frase2").fadeIn(10000, function(){
      $("#frase3").fadeIn(15000, function(){

      });
  });
});

了解しました。次の命令を使用して、fadeInまたはキュー内の他のイベントをリセットする必要があります。

$("#frase1").stop(false,true, true);
$("#frase2").stop(false,true, true);
$("#frase3").stop(false,true, true);
1
Francesco