私はかなり奇妙で複雑な機能に取り組んでいます。アイデアは、スライダーを実行するタイマーがあるということです。このタイマーは、スライダーがホバーされる (つまり、スライダーの動きが止まる) とクリアされます。また、スライダー (または、その親コンテナー) が表示されなくなったときにタイマーをクリアしたいと考えています。プラグインの inview を使用すると、要素がビューポートにあるかどうかを確認できます。親要素がビューポートに表示されなくなったら、タイマーをクリアします。ただし、これは機能しておらず、その理由がわかりません。ホバー時にタイマーをクリアすると機能します。ここにフィドルがあります。
機能していない部分:
$("body > .section").bind('inview', function (event, isInView) {
var $this = $(this);
if (isInView) {
// Päuse Twitter slider if it's not in the viewport
if (!$this.is(".twitter")) {
clearInterval(timer);
console.log("Timer cleared");
$(".twitter .article.focus").addClass("pause");
} else {
$(".twitter .article").removeClass("pause");
startTimer();
console.log("Timer restart");
}
}
});
ご覧のとおり、イベントはコンソールに記録されるため、トリガーされますが、スライダーは停止しません (コンソールでわかるように: クラスは引き続き割り当てられ、.twitter 内の .articles に削除されます。これは、タイマーがはクリアされません.しかし、なぜでしょうか?私はそれを理解できません.タイマーはグローバルに設定されているので、問題にはなりません.
編集: どうやら、ホバー時のタイマーのクリアも機能しないようです...すべての console.logs が機能するため、奇妙です。ANDtimer
はグローバル変数として設定されます。