Question

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

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

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

Answer 1

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

的起点

Answer 2

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

Answer 3

问题是你正在使用绝对定位......因为剩余边距不起作用....使用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
        });
    });
});

演示：Fiddle

Answer 4

内部类不正确。如果你想设置margin-left，你应该设置左是0，而不是右：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

JS幻灯片div类不工作 - 简单的问题

4 个答案: