Question

我希望能够做的是单击div并仅使用TweenMax和JQuery库扩展该特定div。目前，下面的示例是更新所有flex-items div。

HTML：

<div class="main-content">
        <div class="flex-container">
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
            <div class="flex-items" onclick="mouseOver()"></div>
        </div>
    </div>

JS：

function mouseOver(){
    var flexItem = $(".flex-items");
    TweenLite.to(flexItem, 1.5, {width: 500, height: 500, ease:Power2.easeOut});
}

Answer 1

每次运行该功能时都会选择所有项目。

此外，您应该使用带有匿名回调函数的jquery＆＃39; .on()而不是带有不必要的命名函数的onclick属性

尝试这样的事情

＆＃13;

$('.flex-items').on('click', function() {
  // This is the problem, you are selecting all flex-items everytime
  // var flexItem = $(".flex-items");

  // This should work
  var flexItem = $(this);
  TweenLite.to(flexItem, 1.5, {
    width: 500,
    height: 500,
    ease: Power2.easeOut
  });
});

＆＃13;

<div class="main-content">
  <div class="flex-container">
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
    <div class="flex-items"></div>
  </div>
</div>

＆＃13;

Answer 2

function mouseOver(){
    var flexItem = $(this);
    TweenLite.to(flexItem, 1.5, {width: 500, height: 500, ease:Power2.easeOut});
}

你的意思是这样吗？

我有问题指定使用＆＃34;这＆＃34;用jquery

2 个答案: