jquery - Jquery スライド左から右

Question

http://jsfiddle.net/uw8Kz/2/ 私のは動作しません

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

});

http://examples.learningjquery.com/slide/から取得したこのコードのカスタマイズに役立ちます

基本的にはこの効果を真似したいだけの「接客」

Answer 1

これが私の仕事です：

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

デモ:左から右

Answer 2

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

$(this)は最後の子 ( .mybutton) でありnext()、何も返さないため、$lefty空になります。

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

うまくいくはずです（私があなたを正しく理解していれば）。

デモ

Answer 3

あなたのhtmlはあなたのjsと一致しません.nextは前と同じように次の要素を参照します.prevに置き換えるか、 htmlを再配置し、左はcssの配置で動作します. しかし、その効果が必要だったので、アニメーションはそこで親に適用されます。

<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>