I'm facing an issue where an unexpected if statement is being triggered. I am working on creating a transition between two images on click. Once the transition is complete, I add a class to the body to show and hide some content. My goal is to reverse the transition by adding a class to the body and moving the image back into place.
The problem arises when running the code below (offset definitions omitted). The initial transition works as intended - executing the code in the first if statement and adding the 'expand' class to the body. However, upon clicking again to revert the transition, the 'expand' class is removed from the body, the image transitions but then 'expand' is added back to the body (the first if statement runs after the transitions).
Is there a way to prevent the initial if statement from triggering and adding 'expand' back to the body on the second click/transition?
Thank you for your assistance!
$('.picture-item').click(function(){
if (!$('body').hasClass('expand')) {
var length = $('.match').length;
$('.match').each(function(i) {
// get the data value for the equivalent pictures
var pictureMatch = $(this).data('image');
$(this).find('.picture-item-background').css({ '-webkit-transform':'translate('+offsetLeft+'px, '+offsetTop+'px) scale('+offsetScale+')'});
if(length == i+1){
$('.match').find('.picture-item-background').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
$('body').addClass('expand');
});
}
i++;
});
}
if ($('body').hasClass('expand')) {
$('body').removeClass('expand');
$('#minimized').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
$('.picture-item-background').css({'-webkit-transform':'translate(0px,0px) scale(1)'});
});
}
return false;
event.stopPropagation();
});