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是页面上的另一个元素。有关工作示例，请参阅this fiddle。

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

我可以让Toggle fadeIn Slow和fadeOut Fast吗？

4 个答案: