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 に答える