Question

我的网页上有一些功能可以隐藏或显示侧边菜单。我有两个div，#collapse-side-nav和#expand-side-nav。现在设置的方式是默认情况下#expand-side-nav's样式设置为display:none;。然后，当用户点击collapse-side-nav ID时，side-nav会崩溃，然后会显示#expand-side-nav。

我注意到新的#expan-side-nav的定位需要比#collapse-side-nav's div更加向右和稍微高一点，我希望通过动画实现这一目标，以便它看起来很圆滑。我的代码如下。但是，当我在浏览器中测试时，动画只能运行一次。

$('#collapse-side-nav').click(function() {
    $('.side-nav').toggle(300);
    $('#collapse-side-nav').css('display', 'none');
    $('#expand-side-nav').css('display', 'inherit');
    $('#expand-side-nav').animate({
        'margin-left' : 34,
        'margin-top' : 2
     }, "slow");
    $('.container').animate({
        'padding-left' : 0
     }, "slow");
});
$('#expand-side-nav').click(function() {
    $('.side-nav').toggle(325);
    $('#expand-side-nav').css('display', 'none');
    $('#collapse-side-nav').css('display', 'inherit');
    $('.container').animate({
        'padding-left' : 200
    }, "slow");
});

修改今天晚些时候我会试着发一个小提琴。我也试过开始而不是声明确切的像素（jQuery- animate() only works once）然而，这每次都会增加，这意味着每次用户点击div时，css将继续向右推进。

jQuery- animate（）只能运行一次

0 个答案: