CODEWITHSUNDEEP
jqueryanimation
bryanlewis
bryanlewis

Reputation: 569

Animate show/hide div from left to right

I'm currently working with the following code. 

<script type="text/javascript">

$(document).ready(function(){

 $(".slidingDiv").hide();
 $(".show_hide").show();

 $('.show_hide').toggle(function(){
   $(".slidingDiv").animate({
       opacity: 0.25,
       left: '+=50',
       height: 'toggle'
       }, 5000,
     function(){
       $("#plus").text("-")
     }
   );
 },function(){
     $(".slidingDiv").slideUp(
     function(){
       $("#plus").text("+")
     }
     );
 });
});

</script>

And my animation is working but its sliding up and down. I'd rather have it slide left to right to display. It seems like an easy fix but I'm having some problems getting it to work.

Thoughts?

Upvotes: 2

Views: 14014

Answers (1)

Pitchai P
Pitchai P

Reputation: 1317

You can use

SlideRight: 

  .animate({ width: 'show' });

SlideLeft: 

  .animate({ width: 'hide' });

Please refer this fiddle : http://jsfiddle.net/pitchaip/dK6Zv/

Upvotes: 9

Related Questions