onClick 从左到右打开 div

Question

我有类似的 HTML：

a#clickme{width:20px; height:20px; background:#444; cursor:pointer;display:block; text-indent:-9999px}
div.mydiv{width:200px; height:200px;border:2px solid #666; position:fixed; left:-200px}

<a id='clickme' href='#'>Click Me</a>
<div class='mydiv'></div>

现在，我想使用单击clickme 从左到右打开mydiv class。并再次单击以将其关闭。

我如何使用 Jquery 来做到这一点？

提前致谢。

Answer 1

您可以使用 jQuery 为 'left' 属性设置动画：

$('#clickme').click(function() {
    var $slider = $('.mydiv');
    $slider.animate({
       left: parseInt($slider.css('left'),10) == -200 ?
       0 : -200
    });
});

或者，使用 outerWidth()：

$('#clickme').click(function() {
    var $slider = $('.mydiv');
    $slider.animate({
       left: parseInt($slider.css('left'),10) == -$slider.outerWidth() ?
       0 : -$slider.outerWidth()
    });
});

看看这个demo