Home/ Questions/Q 6730659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:26:06+00:00

<script> $(function(){ $(‘#right_image1’).hide().delay(‘10000’).fadeIn(‘5000’); $(‘#left_image1’).hide().delay(‘10000’).fadeIn(‘5000’); }); </script> /* CSS */ #left_image1 { position: fixed; width:

  • 0
<script>
    $(function(){
      $('#right_image1').hide().delay('10000').fadeIn('5000');
      $('#left_image1').hide().delay('10000').fadeIn('5000');
    });
</script>

/* CSS */
#left_image1 { position: fixed; width: 50%; height: 100%; margin-left: 0; background: url(/images/1.jpg) } 
#right_image1 { position: fixed; width: 50%; height: 100%; margin-left: 50%; background: url(/images/2.jpg) }

This currently fades in two divs after a 10 second delay. How can I get the div on the right to slide out of the right side of the browser window after 5s of being displayed and the left div to slide out of the left side of the browser after 5s?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>.

    • 0