フェードイン時に低速で表示され、フェードアウト時に速度が速くなるようにトグルを機能させたい...
$('#target').fadeToggle("fast");
何か案は?
$('#click-me').click(function(){
if($('#target').is(':visible')){
$('#target').fadeOut('fast');
}
else{
$('#target').fadeIn('slow');
}
});
それは仕事をするはずです。私はif($('#target').is(':visible'))
それが表示されているか非表示(トグル)であるかを確認していました。で何かをクリックすると明らかに発火しますid="click-me"
別の要素のフェードを切り替えたい場合は、次の関数を使用できます。
HTML:
<button id="but" target="#content">Toggle content</button>
JS:
function fadeToggle() {
var target = $(this).attr('target');
if(!$(target).hasClass('hide')) {
$(target).fadeOut(100).addClass('hide');
} else {
$(target).fadeIn(2000).removeClass('hide');
}
}
$('#but').click(fadeToggle);
例:JsFiddle
このようなことができます
HTML
<button id="but" target="#content">Toggle content</button>
JS コード
function fadeToggle() {
var target = $(this).attr('target');
$(target).fadeOut(1000,function(){
$(target).fadeIn(2000);
});
}
$('#but').click(fadeToggle);
#target
を異なる速度ですぐにフェードインおよびフェードアウトさせようとしている場合は、次のようなものを使用できます(他の人が提案したように):
$("#target").click(function() {
$(this).fadeOut('fast').fadeIn('slow');
});
これにより、 のfadeOut()
メソッドが呼び出され、最初のメソッドが終了する#target
とメソッドが呼び出されるfadeIn()
ため、div が消えてから再び表示されます。
代わりに、トグルを別の関連アイテムに結び付けたい場合は、次のようにすることができます。
$("#clickme").toggle(function() {
$("#target").fadeOut('fast');
}, function () {
$("#target").fadeIn('slow');
});
#clickme
ページ上の別の要素はどこにありますか。実際の例については、このフィドルを参照してください。