0

マウスのホバー/終了時に2つのdivをフェードインおよびフェードアウトするjquery animate関数があります。

ただし、フェードインとフェードアウトを同時に実行する必要があります。現在、最初の div がフェードインし、次に 2 番目の div がフェードアウトします。2 つを同時に行う必要があります。以下の現在のコード：

var showElements = function(){
    $('#hover-advanced').animate({opacity: "1.0"}, 300),$('#hover-standard').animate({opacity: "0.3"}, 300);

}

これが可能かどうか誰にもわかりますか？

ありがとう

4

2 に答える 2

2

animate() 関数には queue オプションがあります...アニメーションが同時に行われたかのように表示するには false にします -

var showElements = function(){
    $('#hover-advanced').animate({opacity: "1.0"}, {duration: 300, queue: false}),$('#hover-standard').animate({opacity: "0.3"}, {duration: 300, queue: false});
}

jQuery animation() ドキュメント - http://api.jquery.com/animate/

于 2012-06-25T10:09:07.383 に答える
1

アニメーションは同時に実行されます。不透明度の認識は不透明度の値に比例しないため、それらは次々に発生するように見えます。他の要素がすでにフェードし始めている場合、可視化された要素が完全に不透明ではないことはわかりません。

より長いアニメーション時間を使用すると、それらが実際に同時に実行されることがわかります。

linearデフォルトのイージングの代わりにイージングを使用してみて、swing見栄えが良くなるかどうかを確認できます。

$('#hover-advanced').animate({opacity: "1.0"}, 300, "linear");
$('#hover-standard').animate({opacity: "0"}, 300, "linear");

別のオプションは、アニメーションを同時に実行しないようにすることです。表示されるアニメーションに遅延を追加すると、同時に実行されているように見えます。

$('#hover-advanced').delay(100).animate({opacity: "1.0"}, 300);
$('#hover-standard').animate({opacity: "0"}, 300);
于 2012-06-25T10:23:19.463 に答える