0

次のサイトに JS 機能がありますが、Firefox では問題なく動作しますが、Safari では動作しません: http://rossbolger.com/kids/light-stories/

この機能は、マウスが#hit-areaと呼ばれるコンテナーの上に移動すると、 #image-thumbsと呼ばれるサムネイルのグリッドをスライドさせます。最初に #image_thumbs の高さを '48px' から 'auto' に変更すると (少なくとも Firefox では) 機能し、高さは jQuery の height() を使用して測定されます。この高さは変数に格納され、マウスが上にあるときに jQuery の css() を使用して #image-thumbs に返されます。

サイトのコードは次のようになります。

// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');

// Slide Up Thumbs
(function revealThumbs() {

    // On hover let the thumbs become their full height
    $('#image-thumbs #hit-area').hover(function(){ // Mouse over
        // Get the unrestricted height of the thumbs
        thumbs.css('height', 'auto');
        thumbs_height =  thumbs.height();

        // then put it back to what it was so we can animate it using CSS3 transition
        thumbs.css('height', 'inherit');

        // delay 0.1s before triggering the change in height (time for the calculations to complete)
        setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );

    }, function(){ // Mouse out
        hideThumbs();
    });
})();

// Hide thumbs
function hideThumbs(){
    thumbs.css('height', thumbs_original_height );
};

単に高さを 'auto' に設定するのではなく、無制限の高さを測定してピクセル値として返す理由は、CSS3 を介してスライド効果を作成するためです (つまり、トランジション: 高さ 0.5 秒)。遷移は、影響を受ける属性がある数値から別の数値に移行する場合にのみ発生します。

これをテストするバグを手伝ってくれてありがとう。私はまだ他のブラウザを見たことさえありません。

ごきげんよう、ローレンス

4

1 に答える 1

0

さて、私はそれを解決しました...

javascript ドキュメント (サイトの scripts.js) には、ページの上部に hideThumbs() 関数を呼び出す関数がありました。hideThumbs() の変数がその時点で宣言されていなかったため、機能していませんでした。面白いことに、Firefox と IE9 でも動作するはずです!

このコードをすべて他の関数の前に移動したところ、問題は解決しました。これまでのところ、これはローカルでのみ行っています。後ほど上記リンク先のサイトを更新します。

于 2013-08-12T11:29:50.073 に答える