1

だから私はインターフェイスを構築しており、divにjQueryを使用してサイズを大きくし、ラップdivをスクロールして、クリックされたdivが画面の上部に表示されるようにします。

私の問題は、scrollTop アクションが最後にクリックされた div の上部の値を登録しているように見えるため、最後にクリックされた div の上部の値が 0 でない場合、途中でスクロールを停止することです。

これが私のスクリプトです：

$(".blow").click(function () {

    if ($(this).attr("data-blow") == "false") {
        $(this).animate({
            left: '0px',
            height: '100%',
            opacity: 0.95
        }, 'slow', function () {
            $('#wrap').animate({
                scrollTop: $(this).offset().top
            }, 'slow');
            $(this).removeClass('blow')
            $(this).addClass('overflow')
            $(this).attr("data-blow", "true")
        });
    } else {
        $(this).animate({
            left: '-75%',
            height: '24%',
            opacity: 0.6
        }, 'slow')
        $(this).removeClass('overflow')
        $(this).addClass('blow')
        $(this).attr("data-blow", "false")
    }
});

現時点での動作を確認したい場合は、次のリンクをご覧ください: http://www.rlacorne.com/blow

そのヒントをありがとう！

4

1 に答える 1

1

.offset().topドキュメントの上部と要素自体の間のピクセル数 (スクロールされたピクセルを含む) を返します。これは、ユーザーがまだページをスクロールしていない場合に要素が正しく展開およびスクロールする理由を説明していますが、スクロールすると期待どおりに機能しません。

独自のオフセットに依存する絶対位置のラッパーを使用して、このようなアニメーションのスクロールを行うのは難しいでしょう。ラッピング要素を完全に削除することをお勧めします。また、アニメーションはその位置に敏感であり、実際には物事を拡張したいだけなので、widthの代わりにプロパティをアニメーション化することをお勧めします。left

これが jsfiddle に対する私の（馬鹿げた）見解です。これはコピー アンド ペースト ソリューションではなく、期待どおりに機能させるには微調整が必​​要です。

提供されているものではなく、次の CSS を検討してください。

.blow { float:left; clear:left; width:25%; height:25%; overflow:hidden; background-color:hotpink; color:black; }

次の JavaScript を使用できます。

$('.blow').on('click', function(event){
    var element = $(this);
    if(element.attr('data-blow') == 'true'){
        element.animate({ width:'25%', height:'25%' }, 1000).attr('data-blow', 'false')
    } else {
        element.animate({ width:'100%', height:'100%' }, 1000, function(){
            $('body').animate({ scrollTop: element.offset().top });
        }).attr('data-blow', 'true');
    }
});

違い、説明:

$(this)まず、参照を呼び出すたびに参照をキャッシュする必要があります。参照は DOM ツリーを走査して要素を見つけます。

var element = $(this);

次に、jQuery を使用してメソッドをチェーンできます。それ以外の：

$(this).removeClass('overflow')
$(this).addClass('blow')
$(this).attr("data-blow", "false")

...できるよ：

$(this).removeClass('overflow').addClass('blow').attr("data-blow", "false")

第三に、これはもう 1 つ専門的ですが、$(element).click(handler)実際には のショートカットです$('element).on('click', handler)。.on()イベントとハンドラーをよりよく理解することにつながるので、私はお勧めします。

おまけ：ホットピンク。

于 2013-05-12T03:35:44.333 に答える