1

このコードにトランジションを追加する方法を考えています。

$("#navContainer").hover(function(){
    $("#navContainer").css("height","auto");
    },function(){
    $("#navContainer").css("height","74px");
});

しばらくウェブを検索しましたが、簡単な解決策が見つかりませんでした... jQuery は初めてです。これがまさに私がやろうとしていることです。

4

3 に答える 3

0

あなたが望むことをするJSFiddleを作成しました。良い点は、必要なのは標準の HTML と CSS3 トランジションだけで、これは非常に高速で、ほぼすべてのブラウザーでトランジションを動作させる CSS3 shim がたくさんあることです。私が行ったことは、<a>要素を div のコンテナーにすることです。これにより、すべてのものを内部に配置できます。緑色の背景のいずれかにカーソルを合わせると、テキストの高さと色がスムーズかつ適切に遷移することがわかります。

于 2013-07-06T04:39:07.737 に答える
0

私は自分の答えにいくつかの調整を加えました. whenとeventsanimateの両方を使用できます。しかし、残念なことに、表現にいくつかの問題があるため、これを解決するために見つけました: JavaScript jQuery Animate to Auto Heightmouseentermouseleaveanimate{"height": "auto"}

http://jsfiddle.net/tVxNc/1/

$("#navContainer").hover(function(){
    var $navContainer = $("#navContainer");
    var $defaultHeight = $navContainer.height();
    var $autoHeight = $navContainer.css('height', 'auto').height();
    $("#navContainer").css('height', $defaultHeight).animate({"height": $autoHeight}, 400, 'swing');
}, function(){
    $("#navContainer").animate({"height": "80px"}, 400, 'swing');
});
于 2013-07-06T04:40:31.653 に答える