Home › Forums › CSS › How can I achieve this "pop out" effect? › Reply To: How can I achieve this "pop out" effect?
April 22, 2016 at 8:19 am
#240818
Shikkediel
Participant
Looks good to me, glad I could help a bit. But since I like code as clean as can be, here’s a slightly sleeker version.
:-)
var i = 0;
$('.item').each(function() {
i++;
i = i%3;
if (i == 1) $(this).addClass('left');
else if (i == 2) $(this).addClass('middle');
else $(this).addClass('right');
});
$('.absItem').on('click', function() {
var active = $(this).parent().hasClass('index');
if (!active) {
$('.scaleTransLeft').removeClass('scaleTransLeft');
$('.scaleTransMid').removeClass('scaleTransMid');
$('.scaleTransRight').removeClass('scaleTransRight');
$('.index').removeClass('index');
}
if ($(this).parent().hasClass('left')) $(this).toggleClass('scaleTransLeft');
else if ($(this).parent().hasClass('middle')) $(this).toggleClass('scaleTransMid');
else if ($(this).parent().hasClass('right')) $(this).toggleClass('scaleTransRight');
$(this).parent().toggleClass('index');
});
The %
here is the modulus operator, quite handy in this case.
i = i%3;