CODEWITHSUNDEEP
javascriptjquerycssgsap
Parzi
Parzi

Reputation: 704

Trying to target a sibling and animate with greensock

I have a bunch of boxes with the following 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>

And the following 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})
});

However, my image isn't rotating. if I change $image to $('.icon-container') Then they all rotate but I only want the .icon-container that is a sibling to the button being pushed to rotate.

Upvotes: 1

Views: 246

Answers (1)

Sushanth --
Sushanth --

Reputation: 55750

You do not have the correct context of $image as this outside the click handler corresponds to the document object.

Instead move the $image check to inside the click handler.

$(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})
});

Upvotes: 2

Related Questions