jQuery でのアニメーション、スライド、フェードなどのアニメーションの継続的なトリガーと遅延についての bug

jQuery でのアニメーション、スライド、フェードなどのアニメーションの継続的なトリガーと遅延についての bug_jquery を共有します。

WBOY

リリース： 2016-05-16 15:20:34

オリジナル

1988 人が閲覧しました

私の記事の書き方のスタイルは、問題の背景と法的損害について最初に話すことを好むものです:

最近、操作オプションを呼び出したいと思ったので、デフォルトでは非表示にし、マウスを移動すると表示されるようにしようと思いました。

最初は、マウスオーバー (またはマウス入力) 時に追加を直接トリガーし、マウスアウト (またはマウスから離れる) 時に削除をトリガーする class="active" を追加することを計画していました。この解決策は非常にシンプルで実用的ですが、エクスペリエンスはそうではないかもしれません。それはクールです (OK、私はこの言葉を使用しましたが、すぐにとても低く感じました)。それで、最初はアニメーションやスライドなどの jQuery アニメーションを使用することを考えていました。正直に言うと、このプラグインを作成する場合は、実装するのは簡単ではありません (結局のところ、私の js の習熟度はそれほど高くありません)。その後、同僚の意見を聞いて jquery を見つけ、インポート後に直接引用するだけでした。

(幸いなことに、私には特定の特殊効果を実行したいときにオンラインでプラグインを探す習慣がありません。これについて話すとき、私はまた、数日前にスクロールについて遭遇したことを思い出します正直に言うと、その方法をインターネットで探しましたが、最終的に適切な解決策を見つけることができませんでした。私自身、これは非常に満足のいく解決策ですが、最良の解決策ではないかもしれません)

。

本題に戻りますが、正直、他の方のプラグインは非常に優れており、各種ブラウザでの互換性も解決されていますが、個人的には2～3個のプラグインしか使っていません。 -ins. ページが使用され、ファイルがインポートされる必要があり (これは特に面倒ではないようです)、他の人に使用される必要があります。結局のところ、達成感はありません。

その後、ようやく自分で作成することができました。時間がかかり、いくつかの問題が発生しましたが、少なくともいくつかの jQuery 組み込み関数についてはよく理解できました。

追伸: 最後にもう 1 つ付け加えます。私は自分で解決策を見つけた後、もう一度 Baidu を検索しました。最初に出てきた Web リンクをクリックするのが私が使用した方法です。

バグの再発: アニメーションを作りたかったのですが、面倒なのでコードを書きましょう。この問題を知っている人はアニメーションを見なくても何が問題なのかがわかります。問題がある場合は、まずコードをコピーして試してください。

追記: 以下ではアニメーションアニメーションを例にしています

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:70%;margin:50px auto;height:300px;">
<div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;">
<div class="test" style="margin-left:-6em">
<a>
测试用的文字
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<script>
$("[data-toggle='tooltip']").tooltip();

$("#test").on("mouseover",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
})
.on("mouseout",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
})
//连续触发动画bug
//不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画
</script>
</body>
</html>

ログイン後にコピー

上記のコードでは、stop() メソッドが私によってコメント化されました。これは、Baidu で検索した後、他の人が言及したもので、私の意見では最も完璧な解決策です。解決策ですが、個人的には特に完璧だとは思いません。違いについては後で説明します。

はじめに

$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

ログイン後にコピー

これら 2 行のコードには filter() 関数がありません。これは、私が最初にこのバグに遭遇したときのコードの様子です。

このバグの原因は、短期間にアニメーションが蓄積されること（前のアニメーションの再生が完了していないこと）によって引き起こされます（この問題に遭遇した場合、この原因は、コード）。したがって、解決策は 2 つあります。

【フィルター】

1 つは、フィルターを使用して、アニメーションが発生する前にアニメーション化されている要素をフィルターで除外し、前のアニメーションが終了した要素のみが新しいイベントをトリガーできるようにすることです。

これにより、対応するコンテンツにマウスを移動すると、mouseover イベントがトリガーされ、アニメーションが終了する前に、対応するコンテンツ領域の外でマウスを削除します。がトリガーされましたが、前のアニメーションが終了していないため、イベントがトリガーされても期待される機能は実行されません。この時点では、期待される「mouseleave イベントがトリガーされ、コンテンツが非表示になる」という結果は得られません。

もちろん、マウスオーバーイベントによってトリガーされるアニメーションが終了する前に、オペレーターが対応するコンテンツ上にマウスを置き続けた場合、この解決策は何の影響もありません。

【停止】

stop() については、皆さんご存知かと思いますが、もう一度動かしてみます。

//语法结构
$("#div").stop();//停止当前动画，继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

ログイン後にコピー

この解決策のアイデアは単純です。マウスオーバーすると、対応するアニメーションがトリガーされますが、アニメーションが終了する前に、マウスを離れ、同時にマウスを離れると、それに対応するアニメーションをトリガーしたいと考えています。、対応する要素の進行中のアニメーションを停止する必要があります。そうすれば、バグは存在しなくなります。

最後に、このエッセイには要約がないようですが、実際には、アニメーション、スライド、およびフェードのアニメーション関数についてよく知っているだけです。同時に、パラメーターによる停止とアニメーションの違いについてもよく知っています。パラメータなし (正直に言うと、最初はパラメータがありませんでした) 1 ～ 2 日後、偶然 API を見たときに、突然というアイデアを思いつきました。このバグを解決するには stop を使用します)。

上記は、Script House のエディターが、jQuery でのアニメーション、スライド、フェード、その他のアニメーションの繰り返し実行の継続的なトリガーと遅延に関するバグを共有したものです。これが皆さんの今後の作業や作業に役立つことを願っています。勉強。