试图用Greensock瞄准兄弟姐妹和动画

Question

我有一堆盒子，以下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})
});

但是，我的图像没有旋转。如果我将$图像更改为$('。iCon-container'(，那么它们都旋转了，但我只想要一个.con-container，它是一个被推到被推到旋转的按钮的同级。

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