Question

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

对于后代，这是我的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吗？

感谢您的任何建议！

Answer 1

easy :)使用回调。 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/

Answer 2

为什么不使用可见性过滤器来对隐藏元素施加延迟，而不是参与回调：

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

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

我在你的小提琴中尝试过，并没有任何笨蛋。只需确保更改间隔，延迟间隔为>=可见切换的间隔。

Answer 3

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

Answer 4

试试这个

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

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

4 个答案: