2

私は Velocity.js と jquery.inview をいじっています。私のページのすべてのタイトルが表示されたら、slideDownIn にしたいです。このコードは、最初のタイトルで正常に機能します。

$('.movies-title').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is now visible in the viewport
    if (visiblePartY == 'top') {
      // top part of element is visible
    } else if (visiblePartY == 'bottom') {
      // bottom part of element is visible
    } else {
      // whole part of element is visible
      $(this).velocity("transition.slideDownIn", 500);      
    }
  } else {
    // element has gone out of viewport
    $(this).velocity("reverse");
  }
});

上記を数回コピーして貼り付け、.movies-title他のタイトルのクラスに置き換えると、思いどおりに機能します。

ただし、それは多くの余分なコードのようです。に変更しようとし$('.movies-title')まし$(.movies-title, .tv-title, .books-title)たが、アニメーションはリストの最後の要素に対してのみ機能します。.titleまた、すべてのタイトルに呼び出される新しいクラスを追加して変更しようとし.movie-titleまし.titleたが、それも機能しませんでした。

私は何を間違っていますか？コードを要約するにはどうすればよいですか?

4

2 に答える 2

2

これらの要素には共通点があるため、これらの要素のそれぞれに単一のクラスを使用するのが最善の解決策です。クラスタイプとして追加titleして、そのクラスに適用するだけです。

<div class="title movie-title"></div>

質問でこれについて言及したことは知っていますが、なぜこれが機能しないのかわかりません。

于 2014-12-03T18:40:04.993 に答える
1

複数のバインドの代わりにデリゲートを使用してみてください。また、それらすべてに対して統一されたクラスを作成します（タイトルを使用しました）

このように -

$('body').delegate('.title','inview', function(event, isInView, visiblePartX, visiblePartY) {

編集 - 申し訳ありませんが、最初に間違ったフィドルをリンクしました

フィドルを参照http://jsfiddle.net/d1g7sLxq/3/

于 2014-12-03T19:04:04.323 に答える