Question

Hi I am using this: jQuery resize div box at hover and it does exactly as I want but I have 4 squares though and they all open left, i want the first 2 to continue to open left but the last two to open right e.g:

first two:

–> will open left to right

last two:

<– will open right to left

Can anyone help me here?

Answer 1

I assume that the box opens right as from the link you provided. You can add another class for the box to open left (say boxleft)

$('.content_area div').hide();

initwidth = $('.boxleft').width();
initHeight = $('.boxleft').height();

$(function() {
    $('.boxleft').bind('mouseenter', function() {
        $(this).children('.more').show();
        $('.boxleft').not(this).stop(true, true).fadeTo('normal', 0.2);
        $(this).stop(true, true).animate({
            width: '70',
            height: '70',
            left: '-=50'
        }, {
            queue: true,
            duration: 'fast'
        }).css('font-size', '1.2em');
    });
    $('.boxleft').bind('mouseleave', function() {
        $(this).children('.more').hide();
        $('.boxleft').not(this).stop(true, true).fadeTo('normal', 1);
        $(this).stop(true, true).animate({
            width: initwidth,
            height: initHeight,
            left: '+=50'

        }, {
            queue: true,
            duration: 'slow'
        }).css('font-size', '1em');
    });

As you can see i added the extra line left: ‘-=50’ and left: ‘+=50’ in the animate function.