jQuery fadeToggle在传出被隐藏之前显示传入元素

我有一些基本的jQuery来切换按钮中的文本以及在两个div之间切换。问题是，传入的元素在传出的元素消失之前出现，然后传入的元素在动画结束时向上滑动。它看起来有点生气。这里是my fiddle。jQuery fadeToggle在传出被隐藏之前显示传入元素

对于后人，这里是我的html：

<button id='globalTicketsBtn'>Show Table</button> 
<div class="toggle" id="globalTicketsByHour">This is where the chart will be</div> 
<div class="toggle" style="display: none">This is where the table will be</div>

而且我的jQuery：

$("#globalTicketsBtn").click(function() { 
    $(".toggle").fadeToggle(function() { 
     $('#globalTicketsBtn').text($(this).is(':visible')? 'Show Chart' : 'Show Table'); 
    }); 
});

我应该开火动画顺序连续而不是一个单一的fadeToggle？

感谢您的任何建议！

来源

2011-08-01 Matt

容易:)使用回调。 jquery免费提供给你。基本上，你传递一个函数作为最后一个参数，并在动画之后运行。我不得不做一个快速的DOM操作，但除此之外，它非常简单。

$("#globalTicketsBtn").click(function() { 
    $(".toggle:first").animate({ opacity: "toggle" }, 1000 ,function(){ 
     $(".toggle:last").animate({ opacity: "toggle" }, 1000); 
     $(".toggle:last").insertBefore(".toggle:first"); 
    }); 
    $('#globalTicketsBtn').text($('#globalTicketsByHour').is(':visible')? 'Show Chart' : 'Show Table'); 
});

http://jsfiddle.net/qjjDc/2/

来源

2011-08-01 18:31:57

对你很简单，也许:)。完善。太感谢了！ – Matt

哈哈我想。 XD不客气:)高兴地帮忙。 –

问题在于，在继续之前，javascript不会等待动画完成。最简单（虽然不是很漂亮）的解决方案是，先滑动第一个，然后睡一会儿，然后滑动另一个。

来源

2011-08-01 18:20:26 user838417

试试这个

$("#globalTicketsBtn").click(function() { 
    //alert('jesus!'); 
    $(".toggle").fadeToggle(function() { 
     $('#globalTicketsBtn').hide().text($(this).is(':visible')? 'Show Chart' : 'Show Table').fadeIn(10); 
    }); 
});

来源

2011-08-01 18:23:10 ShankarSangoli

而不是涉足与回调，为什么不使用可视性过滤器把一个延迟隐藏元素（或多个）：

让所有可见的元素完成动画之前切换隐藏的：

$("#globalTicketsBtn").click(function() { 
    $(".toggle:visible").fadeToggle(1000) 
    $(".toggle:hidden").delay(1000).fadeToggle(1000)   
});

我想在你的小提琴，也没有herky生涩的烦躁。只要确保您更改了间隔，则延迟间隔为>=可见切换的间隔。

来源

2012-03-01 20:50:18 BBBThunda

jQuery fadeToggle在传出被隐藏之前显示传入元素

回答

相关问题