jquery - 我可以让切换淡入慢和淡出快吗？

Question

我希望切换以这样一种方式工作，当它淡入时，它以慢速出现，而淡出时速度很快......

$('#target').fadeToggle("fast");

有任何想法吗？

Answer 1

$('#click-me').click(function(){
    if($('#target').is(':visible')){
       $('#target').fadeOut('fast');
    }
    else{
       $('#target').fadeIn('slow');
    }
});

那应该做的工作。我曾经if($('#target').is(':visible'))检查它是可见还是隐藏（切换）。显然，当您单击某些内容时它会触发id="click-me"

Answer 2

如果你想切换另一个元素的淡入淡出，那么你可以使用这个函数：

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

Answer 3

如果您试图以#target不同的速度立即淡入和淡出，那么您可以使用这样的东西（正如其他人所建议的那样）：

$("#target").click(function() {
    $(this).fadeOut('fast').fadeIn('slow');
});

这将调用 上的fadeOut()方法#target，然后在fadeIn()第一个完成后调用该方法，因此您的 div 将消失然后重新出现。

相反，如果您想将切换绑定到另一个相关项目，您可以这样做：

$("#clickme").toggle(function() {
    $("#target").fadeOut('fast');
}, function () {
    $("#target").fadeIn('slow');
});​

#clickme页面上的另一个元素在哪里。请参阅此小提琴以获取工作示例。

Answer 4

你可以做这样的事情

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);