0

これは、DOM ツリーの要素にスライド効果を実装している jQuery アニメーションの質問です。

コードのどこかに、他の div がネストされたスライド タブとして機能する親 div があります。ボタンでマウス クリックが検出されると、親 div とそのコンテンツが画面にスライドして表示されるか、画面からスライドします。

簡単にするために、ここにスニペットを示します。問題の div の HTML は次のようになります。

<div id="parentTab" class="tabby">
    <!-- nested here are other divs -->
    <div id="child1"> </div>
</div>

アニメーション コードの JavaScript:

$('#parentTab').animate(
{'left':'-=' +
      ($('#parentTab').width())}, 'slow',
            function() {
                // do something after tab comes into view
            });

私のコードでは、親 div で jquery の animate() のみを呼び出します。コードは Firefox で意図したとおりに動作します。ネストされたすべての div は、親 div とともに左右にスライドします。しかし、Safari や Chrome などの Webkit ベースのブラウザーでは、親の div は正しくアニメーション化されますが、ネストされた div が視覚的に正しく配置されず、配置されるはずの場所の手前で停止するように見えるという問題が発生します。面白いことに、Developer ツールを使用して HTML 要素を調べると、ネストされた div が親 div 内の正しい位置にスナップされます。その観点からすると、ブラウザは要素が正しい位置にあると考えているように見えますが、視覚的には要素が正しく配置されていません。

誰かが同様の問題に遭遇しましたか？

4

1 に答える 1

0

'px'変数を使用して値をアニメーション化することをお勧めします。また、Internet Explorer のバグ修正のために追加することを忘れないでください。

var targetWidth = $('#parentTab').width();

$('#parentTab').animate({'left':'-=' +targetWidth+ 'px'}, 'slow', function() {
      // do something after tab comes into view
});
于 2013-01-25T15:23:55.027 に答える