JQuery SlideOut function from right to left

Question

I am trying to execute the unload function from right in jQuery by changing the code for "From left to right", but it does not work correctly ... Can you please give me the right direction to change ...

http://jsfiddle.net/egUHv/

I am currently using this code ...

$(function() { $('#nav').stop().animate({'marginRight':'-100px'},1000); function toggleDivs() { var $inner = $("#nav"); if ($inner.position().right == "-100px") { $inner.animate({right: 0}); $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />') } else { $inner.animate({right: "100px"}); $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />') } } $(".nav-btn").bind("click", function(){ toggleDivs(); }); }); 

Answer 1

just browse this link, it will be useful http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

or use this

 $("div").click(function () { $(this).show("slide", { direction: "left" }, 1000); }); 

Link: http://docs.jquery.com/UI/Effects/Slide

Answer 2

Try the following: http://jsfiddle.net/egUHv/5/

 $(function() { $('#nav').stop().animate({'margin-right':'-100px'},1000); function toggleDivs() { var $inner = $("#nav"); if ($inner.css("margin-right") == "-100px") { $inner.animate({'margin-right': '0'}); $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />') } else { $inner.animate({'margin-right': "-100px"}); $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />') } } $(".nav-btn").bind("click", function(){ toggleDivs(); }); }); 

Answer 3

A very simple solution:

 $(function() { $('#div').ToggleSlide(); }); $.fn.ToggleSlide = function() { return this.each(function() { $(this).css('position', 'absolute'); if(parseInt($(this).css('right')) < 0) { $(this).animate({ 'right' : '-100px' }, 1000, function() { $(this).css('position', 'relative'); }); } else { $(this).animate({ 'right' : '0px' }, 1000, function() { $(this).css('position', 'relative'); }); } }); }); 

What we do here: When we call the function, we set the position of the position to “absolute” so that we can easily animate it. We check if the element has a negative “right” (already moved to the right), if true, we brighten back to 0 (move from right to left), otherwise we animate “directly” (move from left to right). After the animation is completed, we set the position of the "relative" position so that we can use its size.

Answer 4

Now we have animate.css

animate.css is a collection of cool, fun, and cross-browser animations that you can use in your projects. Great for accents, homepages, sliders, and general simple-adding water awesomeness.

You can invoke animated effects from jquery. Clean and efficient