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

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

$(this)是最后一个孩子 ( .mybutton) 并且next()不会返回任何内容，因此$lefty将为空。

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

应该工作得更好（如果我理解正确的话）。

演示

Answer 2

这是我的工作：

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

演示：从左到右

Answer 3

您的 html 与您的 js 不匹配，next指的是下一个元素，而您拥有它就像以前一样，您应该用prev替换它或只是重新排列您的 html，并且 left 与定位 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>