Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Slide a div from right to left using animate()

I want a div '.whole' to animate (slide from right to left)

jQuery

$('#menu').click(function() {
      $('.whole').toggleClass('r2');
      $('#slideMenu').toggle();
});

.r2 { right: 200px }

I am not able to use the function animate() properly.

like image 849
Nagaraj Chandran Avatar asked Apr 25 '13 07:04

Nagaraj Chandran


People also ask

What does the animate () method do?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

How to slide right to left in jQuery?

Answer: Use the jQuery animate() method There are no such method in jQuery like slideLeft() and slideRight() similar to slideUp() and slideDown() , but you can simulate these effects using the jQuery animate() method.

How to slide up a div using jQuery?

The jQuery slideUp() method is used to slide up an element. Syntax: $(selector). slideUp(speed,callback);

How move DIV from right to left in jQuery on page load?

We can smoothly move any element using jQuery . animate() method, the method basically changes value of css property of the element gradually to perform animation effect, the example shows how easily we can move DIV box to left, right, up and down with . animate() method.


1 Answers

This should work:

$('#menu').click(function(event) {
      event.preventDefault(); // because it is an anchor element
      $('.whole').animate({
          right: '200px'
      });
      $('#slideMenu').toggle();
});

But your position property should already be set in CSS or you might not get exactly what you need.

Working JSFiddle

To explain: the function takes a JS object of properties, like this:

{
    right: '200px',
    somethingElse: 'value',
    myboolean: true
}

you can also assign this to a var and pass it to animate:

var cssProperties = { right: '200px' }

$('#menu').click(function() {
  $('.whole').animate(cssProperties);
});

You can pass other arguements as readable in the documentation.

like image 116
MarioDS Avatar answered Oct 12 '22 23:10

MarioDS