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

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

于 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

不要使用循环，而是将事件处理程序绑定到所有 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);
}
于 2013-10-03T09:23:03.600 回答
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 回答