尝试以兄弟姐妹为目标并使用 greensock 进行动画处理答案

【问题标题】：Trying to target a sibling and animate with greensock尝试以兄弟姐妹为目标并使用 greensock 进行动画处理
【发布时间】：2017-04-27 23:53:00
【问题描述】：

我有一堆带有以下 HTML 的框

<div class="col-md-3 well content-boxes">
  <div class="icon-container">
    <img src="img/icon4.jpeg" />
  </div>
  <h2>Manicures & Pedicures</h2>
  <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <a class="btn btn-default" role="button">View details &raquo;</a>
</div>

还有下面的 JavaScript

var $image = $(this).siblings('.icon-container');

$(document).on('click', '.content-boxes .btn', function() {
        TweenMax.to($image, 1.5, {css:{rotation:90}, ease:Back.easeOut})
});

但是，我的图像没有旋转。如果我将 $image 更改为 $('.icon-container') 然后它们都会旋转，但我只希望 .icon-container 与被按下的按钮同级旋转。

【问题讨论】：

标签： javascript jquery css gsap

【解决方案1】：

您没有正确的 $image 上下文，因为单击处理程序之外的 this 对应于文档对象。

而是将$image 检查移到点击处理程序内部。

$(document).on('click', '.content-boxes .btn', function() {
    var $image = $(this).closest('.content-boxes').find('.icon-container');

    TweenMax.to($image, 1.5, {css:{rotation:90}, ease:Back.easeOut})
});

【讨论】：

谢谢！这就是我所缺少的。 .closest 和 .find
@LandonCall 很高兴有帮助:)