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/

获取的代码

基本上我只是想模仿这个effect“客户服务”

Answer 1

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

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

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

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

Demo

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
    });
  });  
});

Demo: LEFT TO RIGHT

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>

Jquery从左到右滑动

3 个答案: