Home/ Questions/Q 6970561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:43:31+00:00

i am trying to slide a div content to top right side. i am

  • 0

i am trying to slide a div content to top right side. i am trying but i can’t get it, here is my html code 

<html><body>  
<button id="animatenow">animate now!</button>   
<div id="container">
<div>hi</div>  
<div>there</div>  
</body>
</html>

here is script 

$(document).ready(function(){
$('#animatenow').click(function(){  $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);});  });`

my css is 

 #container{width:600px;color:#fff;background:#f00;height:400px}

my jsfiddle code

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, a somewhat overly-complex means to do this:

    $('#animatenow').click(function(){
    var that = $('#container');
    var h = that.height();
    var w = that.width();
    $('#container')
        .wrap('<div id="placeholder"></div>')
        .parent()
        .css({
            'width' : w,
            'height' : h
        })
        .find('#container')
        .css({
            'position' : 'absolute',
            'top' : 0,
            'left' : 0,
            'right' : 0,
            'bottom' : 0
        })
        .animate(
            {
                'top' : '-' + h,
                'left' : w,
                'right' : '-' + w,
                'bottom' : h
            },2000,
            function(){
                $(this).parent().remove();
            });
});

    JS Fiddle.

    The above assumes you want to avoid the sliding element’s text wrapping and re-flowing as it slides out of view. If you’re okay with re-flowing text, then it’s a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().

    References:

    • 0