Question

我需要定位多个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");
  });
}

Answer 1

将所有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");
    });

另外，当jQuery内置动画时，我不确定你为什么要使用TweenLite？

Answer 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");
        });
  });

Answer 3

不要使用循环，而是将事件处理程序绑定到id为“sc”的所有元素，然后使用对函数内部实际元素的引用：

$('[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);
}

Answer 4

您可以将事件处理程序作为委派事件附加到第一个共同祖先。如果你有许多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");
        });

请参阅文档here

如何使用for循环来定位许多div元素？

4 个答案: