Question

我正在使用.fadeToggle，这样当我点击三个div中的一个时，另外两个淡入淡出到两个不同的div，而单击的div仍然存在。问题在于，在过渡期间，div重叠，所以当所有四个变化的div都可见时（短暂但美学上不愉快），存在瞬间。如何创建一个将所有四个显示设置为无的时刻，以便切换顺畅？

到目前为止，这是所有JavaScript：

$(document).ready(function() {
    $('[class^="col"]').click(function() {
        var m = $(this).attr('id');
        $('[class^="col"]').not(this).fadeToggle('slow');
        $('#' + m + 'p').fadeToggle('slow');
        $('#' + m + 't').fadeToggle('slow');
    });
});

谢谢！

Answer 1

jQuery.queue()

    $('[class^="col"]').not(this).fadeToggle('slow').queue(function() {
      $('#' + m + 'p').fadeToggle('slow');
      $('#' + m + 't').fadeToggle('slow');
    });

在某些情况下你可能想要扭转这种情况（把它们放在第一位。）

Answer 2

感谢所有答案，但在经历了几种可能性后，我发现使用if / else语句给出了我想要的确切结果。它应该帮助其他任何人，在这里你去： http://jsbin.com/cusohu/edit?js,output

切换元件之间的延迟可能吗？

2 个答案: