Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can I achieve this "pop out" effect? Reply To: How can I achieve this "pop out" effect?

#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;