Question

第一次点击这个红色div时，它会从页面顶部开始动画;我希望它只会下降50像素（实际上在后续点击中。这里出了什么问题？

我之前没有真正使用animate。我是否需要以某种方式指定起点？

谢谢

$(document).ready(function() {
    $('.obscure').on('click', function() {

        var blueDiv = $('.blue').clone();

        blueDiv.css({'display': 'none', 'z-index': '0', 'top' : y, 'position' : 'absolute'});

        $('#wrapper').append(blueDiv);
        var obscure = $('.obscure');
        var offset = obscure.offset();
        var y = offset.top;
        blueDiv.css('top', y);
        blueDiv.show();

        //$('.obscure').css('z-index', 10000);
        var off = parseInt(y) + 50;
        console.log(y);
        $('.obscure').animate({
            top : y + 50
        }, 100);


    });
});

http://jsfiddle.net/loren_hibbard/U7tAV/2/

Answer 1

似乎不是在Firefox中发生，而是在Chrome中发生。

修复： http://jsfiddle.net/U7tAV/10/

我只是改变了：

    $('.obscure').animate({
        top : y + 50
    }, 100);

在动画top之前应用.css('top', y)位置：

    $('.obscure').css('top', y).animate({
        top : y + 50
    }, 100);

Answer 2

你需要设置模糊的位置。如果你减慢动画的速度，你会看到它移到顶部然后动画到它应该的位置。我添加了

obscure.css('top',offset.top);

并且有效

$(document).ready(function() {
    $('.obscure').on('click', function() {

        var blueDiv = $('.blue').clone();

        blueDiv.css({'display': 'none', 'z-index': '0', 'top' : y, 'position' : 'absolute'});

        $('#wrapper').append(blueDiv);
        var obscure = $('.obscure');
        var offset = obscure.offset();
        var y = offset.top;
        blueDiv.css('top', y);
        blueDiv.show();
        obscure.css('top',offset.top); // ADDED THIS

        //$('.obscure').css('z-index', 10000);
        var off = parseInt(y) + 50;
        console.log(y);
        $('.obscure').animate({
            top : y + 50
        }, 100);


    });
});

不完全确定，但确实有效。 http://jsfiddle.net/U7tAV/13/

jquery animate没有按预期工作

2 个答案: