Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Jquery Sliding A Div Out Of The Side Of The Browser Window

Post a Comment

Solution 1:

A working fiddle is here. Here is the updated JavaScript:

$(function() {
    $('#right_image1').delay(10000).fadeIn(500).delay(5000).animate({
        marginLeft: '100%'
    });
    $('#left_image1').delay(10000).fadeIn(500).delay(5000).animate({
        marginLeft: '-50%'
    });
});

Note that we use numbers for delay and the duration of fadeIn. Then, we use animate to handle the left/right movement.

Additionally, we hide with CSS instead of JavaScript; that's best practice.

Also, we specify in the CSS the left value to avoid interaction from margin or padding on the <body>.

Solution 2:

Something like 

$('#right_image1').hide().delay('10000').fadeIn('5000', function() {

    $(this).animate({right: '-1px'}, 5000);
});

$('#left_image1').hide().delay('10000').fadeIn('5000', function() {

    $(this).animate({left: '-1px'}, 5000);
});

Post a Comment for "Jquery Sliding A Div Out Of The Side Of The Browser Window"