0

複数の div 要素をターゲットにする必要があります。それらはすべて同じアクションを必要とします。基本的に、ホバーとダウンでスケールアップする必要があります。

変数をループから jquery と gsap に渡すにはどうすればよいですか?

for (var sca = 1; sca<=12; sca++) { 
  $( "#sc"+sca ).mouseover(function() {
    TweenLite.to("sc"+sca, .5, {css:{ scale:1.3 }, ease:Back.easeOut});
    $( "#sc"+sca ).css("z-index","100");
  })
  .mouseout(function() {
    TweenLite.to(sc1, .5, {css:{ scale:1 }, ease:Back.easeIn});
    $( "#sc"+sca ).css("z-index","1");
  });
}
4

4 に答える 4

4

すべてのdiv要素に同じクラスを指定すると、ループすることなく、そのクラス セレクターを使用して、同じイベント ハンドラーをすべての要素に同時にアタッチできます。このようなもの：

$('.myClass')
    .mouseover(function() {
        TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
        $(this).css("z-index", "100");
    })
    .mouseout(function() {
        TweenLite.to(this, .5, { css: { scale: 1 }, ease: Back.easeIn });
        $(this).css("z-index","1");
    });

また、TweenLitejQuery にアニメーションが組み込まれているのに、なぜ使用しているのかわかりませんか?

于 2013-10-03T09:22:36.990 に答える
2 
$(document).ready(function () {
        $('.fooDiv').mouseover(function () {
            TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
            $(this).css("z-index", "100");
        })
        .mouseout(function () {
            TweenLite.to('sc1', .5, { css: { scale: 1 }, ease: Back.easeIn });
            $(this).css("z-index", "1");
        });
  });
于 2013-10-03T10:08:00.700 に答える
0

イベント ハンドラーを委任イベントとして最初の共通の祖先にアタッチできます。ドキュメントに配置する div が多数ある場合、これはパフォーマンス上の問題です (これらの div のそれぞれにハンドラーをアタッチすることをお勧めします)。

例として

// Delegated event
    $('#commonAncestorID')
        .on('mouseover','.divClass', function() {
            TweenLite.to(this, .5, { css: { scale: 1.3 }, ease: Back.easeOut });
            $(this).css("z-index", "100");
        })
        .on('mouseout','.divClass', function() {
            TweenLite.to(this, .5, { css: { scale: 1 }, ease: Back.easeIn });
            $(this).css("z-index","1");
        });

こちらのドキュメントを参照してください

于 2013-10-03T09:34:01.063 に答える
0

ループを使用しないでください。代わりに、「sc」で始まる ID を持つすべての要素にイベント ハンドラーをバインドしてから、関数内の実際の要素への参照を使用します。

$('[id^="sc"]').mouseover(function() {
    TweenLite.to(this.id, .5, {css:{scale:1.3}, ease:Back.easeOut});
    $(this).css("z-index","100");
  })
  .mouseout(function() {
    TweenLite.to(this.id, .5, {css:{scale:1}, ease:Back.easeIn});
    $(this).css("z-index","1");
});

または、Rory が提案したように、代わりにクラスを使用します (クラス セレクターの方がパフォーマンスがわずかに優れています)。

絶対にループを使用する必要がある場合(sca上記で示したように使用しない場合) 、その反復の値を保持するクロージャーを作成する必要があります。

for(var sca = 1; sca <= 12; sca++) {
    (function(sca) {
        $( "#sc"+sca).mouseover(function() {
            TweenLite.to("sc"+sca, .5, {css:{scale:1.3}, ease:Back.easeOut});
            $( "#sc"+sca ).css("z-index","100");
        })
        .mouseout(function() {
            TweenLite.to("sc" + sca, .5, {css:{scale:1}, ease:Back.easeIn});
            $( "#sc"+sca ).css("z-index","1");
        });
    })(sca);
}
于 2013-10-03T09:23:03.600 に答える