Menu
I found following code in multiple places to slide left/right:
$('#hello').hide('slide', {direction: 'left'}, 1000); However, i can't get it working. Here is minimalistic test which I am trying:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { $("#test").click(function() { $('#hello').hide('slide', {direction: 'left'}, 1000); }); }); </script> </head> <body> <article > <div id="hello"> Hello </div> <p><span id="test">Test</span> </arcticle> </body> I tried it in Chrome and Safari and it doesn't work.
What is the problem? Are there other working methods to slide left/right?
241
hide("slide", { direction: "right" }, 500, function () { $('#fsEditWindow'). show("slide", { direction: "left" }, 500); }); });
$('image'). show("slide", { direction: "right" }, 1200);
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.
You can easy get that effect without using jQueryUI, for example:
$(document).ready(function(){ $('#slide').click(function(){ var hidden = $('.hidden'); if (hidden.hasClass('visible')){ hidden.animate({"left":"-1000px"}, "slow").removeClass('visible'); } else { hidden.animate({"left":"0px"}, "slow").addClass('visible'); } }); }); Try this working Fiddle:
http://jsfiddle.net/ZQTFq/
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
