0

我有一个按钮，点击后会滑动一个名为“inner”的 div。小提琴在这里：更新 - http://jsfiddle.net/NfXTY/1/

问题出在这条线上的某个地方var $marginLefty = $('.inner');。

我还想知道如何以相反的方式启动动画，因此当您第一次单击它时它会滑入并再次单击会将其滑出。

4

4 回答 4

0

问题是您使用的是绝对定位......因为左边距不起作用......left改用

<div class="inner" style="left: 350px;">Animate this element's margin-left style property</div>

和

$(document).ready(function () {
    $('#slidemarginleft button').click(function () {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
            left: parseInt($marginLefty.css('left'), 10) == 0 ? $marginLefty.outerWidth() : 0
        });
    });
});

演示：小提琴

于 2013-09-27T01:09:43.260 回答
0

.inner需要一个起点margin-left:350px;

于 2013-09-27T01:02:16.860 回答
0

我在http://jsfiddle.net/NfXTY/2/更新了你的小提琴。你失踪+'px'了$marginLefty.outerWidth()。应该是$marginLefty.outerWidth()+'px'。

于 2013-09-27T01:02:39.687 回答
0

内部类不正确。如果你想设置 margin-left 你应该设置left是 0，而不是 right:0，所以 .inner 类应该是 

.slide .inner {
        background-color: #44CC55;
        bottom: 0;
        color: #333333;
        height: 36px;
        left: 0;
        padding: 6px;
        position: absolute;
        width: 338px;
    }

或者继续设置正确的值，你应该设置margin-right值从右向左滑动，像这样：

$(document).ready(function() {
      $('#slidemarginleft button').click(function() {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
          marginRight: parseInt($marginLefty.css('marginRight'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
        });
      });
    });

小提琴链接：fiddle

于 2013-09-27T01:23:51.013 回答