0

第一次点击这个红色 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/

4

2 回答 2

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);
于 2012-11-13T03:34:56.897 回答
0

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

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/

于 2012-11-13T03:41:10.457 回答