0

一連の画像を掲載するページに取り組んでいます。各画像はコンテナー内にあり、各コンテナーは左にフロートされます。画像の幅はさまざまであるため、各行にいくつの画像があるかを知る方法はありません。訪問者が画像をクリックすると、画像とそのコンテナが展開されます。

状況によっては、この展開は、クリックされた画像が次の行にジャンプし、そのために画面から離れることを意味します。クリックされた画像がどこに行っても画面を追従させる方法を探しています。

これまでの私のコードは次のとおりです。

<script type="text/javascript">
$(document).ready(function(){
    $(".ExampleImage").toggle(
        function(){
            var Image = $(this);
            var Container = $(this).closest(".ImageContainer");
            Image.switchClass("ExampleImageContracted","ExampleImageExpanded",500);
            Container.css('height','auto');
            Image.queue(scrollToExample(Image));
        },
        function(){
            var Image = $(this);
            var Container = $(this).closest(".ImageContainer");
            Image.switchClass("ExampleImageExpanded","ExampleImageContracted",500);
            Container.animate({'height':'250'},500,scrollToExample(Image));
        }
    );

    function scrollToExample(Image) {
        var NewTop = $(Image).closest(".Example").offset();         
        $('html, body').animate( {
            scrollTop:NewTop.top
        }, 1000);   
    }
});
</script>

これを正しくシーケンスするために、.animateとの両方のコールバックを使用したことに注意してください。.queue残念ながら、これがイメージ コンテナに取り込む値.offsetは古いトップであり、アニメーションの後に発生するものではありません。アニメーションが完了したら、コンテナーの上部を取得する方法を探しています。アドバイスをいただければ幸いです。

上記のコードの動作を確認したい場合は、こちらのリンクを参照してください。ページに到着して例 4 をクリックしても、画面は例 4 の新しい場所までスクロールダウンしないことに注意してください。

http://notiondigitalarts.com/ImageEnlargeTest/

4

1 に答える 1

0

次の 2 行を変更してみてください。

Image.queue(scrollToExample(Image));
...
Container.animate({'height':'250'},500,scrollToExample(Image));

に：

Image.queue(function() { scrollToExample(Image); });
...
Container.animate({'height':'250'},500,function(){scrollToExample(Image);});

.queue()コールバック関数をandに渡さなかった方法では、関数をすぐ.animate()に呼び出して、scrollToExample()その結果を.queue()andに渡しました.animate()。

そうは言っても、ここではまったく使用する必要はないと思います.queue()。

関数内では、すでに jQuery オブジェクトであるためではなく、scrollToExample()と言うことができることにも注意してください。(関数で他のタイプの入力を処理できるようにしたい場合を除きます。)Image.closest(...$(Image).closest(...Image

于 2012-07-17T00:32:17.110 に答える