尝试以兄弟姐妹为目标并使用 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})
});

但是，我的图像没有旋转。如果我将 $image 更改为 $('.icon-container') 然后它们都会旋转，但我只希望 .icon-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})
});

尝试以兄弟姐妹为目标并使用 greensock 制作动画

Trying to target a sibling and animate with greensock

javascript

css

jquery

gsap