Search code examples
javascriptjquerytelerik

How to move an entire div element up x pixels?

I want to reposition an entire div and its contents up about 10-15 pixels.

How can I do this?

Note: this is slider element, so when I click a button the slider slides down. Once it is finished I want to reposition it up about 15 pixels.

Solution 
  • $('#div_id').css({marginTop: '-=15px'});

    This will alter the css for the element with the id "div_id"

    To get the effect you want I recommend adding the code above to a callback function in your animation (that way the div will be moved up after the animation is complete):

    $('#div_id').animate({...}, function () {
    $('#div_id').css({marginTop: '-=15px'});
});

    And of course you could animate the change in margin like so:

    $('#div_id').animate({marginTop: '-=15px'});

    Here are the docs for .css() in jQuery: http://api.jquery.com/css/

    And here are the docs for .animate() in jQuery: http://api.jquery.com/animate/