CODEWITHSUNDEEP
jquery
Jeremi Liwanag
Jeremi Liwanag

Reputation: 964

Jquery Slide Left to Right

http://jsfiddle.net/uw8Kz/2/ mine doesn't work 

$(document).ready(function() {
 $('.mybutton').click(function() {
   var $lefty = $(this).next();
   $lefty.animate({
     left: parseInt($lefty.css('left'),10) == 0 ?
     -$lefty.outerWidth() :
     0
   });
 });

});

help in customizing this code that i got from http://examples.learningjquery.com/slide/

basically i just want to imitate this effect "Customer Service"

Upvotes: 1

Views: 292

Answers (3)

mishik
mishik

Reputation: 10013

var $lefty = $(this).next();

$(this) is the last child (.mybutton) and next() will return nothing, so $lefty will be empty.

var $lefty = $(this).parent();

should work better (if I understood you correctly).

Demo

Upvotes: 2

CME64
CME64

Reputation: 1672

your html is not matching your js, next refers to the next element while you have it as previous, you should either replace it with prev or just rearrange your html, and left works with positioning css. but since you wanted that effect, the animation is applied on the parent there.

<div id="slideleft" class="slide">
    <div class="inner">
        <div class="mybutton">SLIDE IT</div>
        <div class="scontent" style="position:absolute">Animate this element's left style property</div>
    </div>
</div>
<div class="cls"></div>

Upvotes: 0

Olrac
Olrac

Reputation: 1537

Here's my work:

$(document).ready(function() {  
   $('#slideleft .mybutton').click(function() {
    var $marginLefty = $(this).parent();
      $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
      $marginLefty.outerWidth() :
      0
    });
  });  
});

Demo: LEFT TO RIGHT

Upvotes: 2

Related Questions