0

私はjQueryについてあまり知りません。おそらくこれは簡単なことです...私はこのWebサイトに取り組んでいます：

http://www.adaptdesign.com/misc/jtppwg/venuedirectory.html

The Atlantic Hotel、St Brelade's Bay Hotel、The Club Hotel & Spa などの右側のパネルのリンクをクリックすると、ページが下にスクロールし、それぞれの DIV が点灯します。問題ありません。これは、次の jQuery で行われます。

<script>
$(document).ready(function() {
    $("a.anchorHL").anchorAnimate()
});

$(document).ready(function() {
$("a.anchorHL").anchorAnimate().click(function() {
$('.venuedivhighlight').removeClass('venuedivhighlight');

$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('venuedivhighlight');

});
});

</script>

venuedivhighlight の CSS は次のとおりです。

.venuedivhighlight {
background-image: url(images/anim-bg-fade.gif);
}

黄色のフェードはアニメーション GIF で行われます。jQuery でこのアニメーション効果を実現できることは知っていますが、うまく動作させることができなかったため、時間を節約するためにこれを回避策として使用しました。

Firefox ではこれは完全に機能しますが、他のすべてのブラウザーでは、選択した会場が 1 回強調表示され、その後のクリックとスクロールでアニメーションの背景がリロードされません。上記の CSS を赤い背景に設定すると、すべてのブラウザーで表示されることに気付きました (FF ではアニメーションの後に赤が表示され、他のブラウザーではすぐに赤が表示されます)。

クリックするたびにGIFを更新する方法についてのアイデアはありますか?

余談ですが、黄色のボックスにもう少しパディングを入れたいと思います。つまり、強調表示が発生したときにテキストの周りにスペースを増やしたいと思います。これはほとんどのブラウザーでは問題ありませんが、数ピクセルのパディングを追加すると、IE8 および 9 では全体が完全に混乱して表示されます (以前のバージョンでは、イライラすることに完璧に見えます)。誰かが知っている新しい IE パディングの問題の回避策はありますか?

よろしくお願いします。

クリス

アダプティブ デザイン

4

1 に答える 1

1

最初の質問に答えるには、元の計画に固執し、jQuery で色をアニメーション化するのが最善の策だと思います。あなたが遭遇する可能性が最も高い問題は、jQuery がそのままではこれを行うことができないということです。色をアニメーション化するには、jQueryUI の Effects ライブラリが必要です。こちらのドキュメントをご覧ください: http://jqueryui.com/demos/animate/

そのため、最初にエフェクト ライブラリを含む jQueryUI のカスタム パッケージをダウンロードしてページに追加し、次のようにしてみます。

$(function() {
    $("a.anchorHL").anchorAnimate().click(function() {
        $('.venuedivhighlight').removeClass('venuedivhighlight');
        var $el = $('a[name=' + $(this).attr('href').substring(1) + ']').next();

        // No need to set the class if the sole purpose is just to animate it later...
        $el.css({ backgroundColor: '#ff0000' });

        // Here's the magic
        setTimeout(function() {
            $el.animate({ backgroundColor: '#fff' }, 3000);
        }, 3000);
    });
});

質問の 2 番目の部分に答えるには、たとえば 5px のパディングを div の端に追加する場合は、 .ad-basic-cellそのために幅から少なくとも 10px を引く必要があります。

.ad-basic-cell {
    width: 205px;
    float: left;
    padding: 5px;
}
于 2011-10-13T17:31:21.433 に答える