0

それで、

コンテナdiv内に隣接する2つのDIVのJSfiddleをまとめました。2つの子divは、カーソルがそれらの上にあるときに、コンテナを埋めるために水平方向に拡張することになっています。これは左端のDIVで正常に機能しますが、右の子DIV（つまり、コンテナを満たすために両方向に拡張する必要があるDIV）で同じアニメーションを試してみると、スムーズに実行されません。子DIVのコンテナの左端への移動とその展開を同時にアニメーション化しようとしましたが、使用しているスクリプトではプロパティが機能しません。何か考えはありますか？

ここでJSfiddleを参照してください。（このフィドルは廃止されました。更新されたバージョンについては、以下を参照してください）

編集：

このJScriptを使用して、DIVの左への動きをアニメーション化することで進歩を遂げました。

$(document).ready(function() {
    $("#profdevcontainer").hover(function() {
        $(this).stop().animate({
            width: '1005px',
            marginLeft: '-170px',
            // 'z-index': '99'
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            width: '250px',
            marginLeft: '0px'
        }, 'fast');   
    });
});

しかし、DIVのアニメーションがほぼ完成すると、更新されたJSfiddleでわかるように、アニメーションは消えます。これは私の親コンテナのオーバーフロープロパティと関係があると確信していますが、考えられる唯一の理由は次のとおりです。

  1. ホバーに適用しているCSSプロパティと、JavaScriptでアニメーション化しているプロパティの間に競合があります。
  2. アニメーション化されたディメンションは、どういうわけかオーバーフローをトリガーしています。

問題のdivのCSSは次のとおりです。

#profdevcontainer {
width: 250px;
height: 60px;
background-color: yellow;
float: left;
margin-right: 3px;
}

#profdevcontainer:hover {
/* animated wit css / width: 1005px; */
/* animated wit css / height: 60px;
/* animated wit css / background-color: yellow;
/* animated wit css / float: left; */
/* position: absolute; */
z-index: 99;
margin-right: 3px; 
}
4

1 に答える 1

0

DIVの左マージンをアニメーション化して、DIVを適切な場所に導き、ちらつきを回避することで、目的の効果を得ることができました。jsfiddleはここにあります。

于 2012-09-27T00:29:01.370 に答える