Question

所以我写了下面的代码：

$('.frame').each(function(){
    $(this).click(function(e){
        var id = $(this).attr('id');
        e.preventDefault();
        $('.active').removeClass('active').fadeOut(800).queue(function(){
            $('#box'+id).addClass('active').fadeIn(800);
        });
    });
});

因此，只要单击具有框架类的按钮，它就会获得相应的框并将其淡入...至少在理论上。它对于每个盒子都是第一次工作，所以我可以点击所有这些盒子，它们都正确地淡入。但是每当我想淡入其中时，我已经褪色了（即使我之前点击了所有其他人），它也不会再次消失。它仍然添加活动类，正确淡出另一个并删除其活动类，但它不会淡入。

好像这已经不够奇怪了，代码会尽快停止工作，因为我引发了上述错误。所以说，一旦我尝试第二次淡入一个对象但它不会再次淡入另一个对象，它甚至不再添加活动类（但stil删除了旧的一个）！）

希望你能提供帮助。

Answer 1

试试这个：

$('.frame').each(function(){
    $(this).click(function(e){
        var id = $(this).attr('id');
        e.preventDefault();
        $('.active').removeClass('active').fadeOut(800, function(){
            $('#box'+id).addClass('active').fadeIn(800);
        });
    });
});

也就是说，请勿在{{1}}之后使用.queue();而是将匿名函数作为.fadeOut()的完整回调。根据{{3}}：

请注意，在使用.fadeOut()添加函数时，我们应确保最终调用.queue()，以便行中的下一个函数执行。

所以你可以使用.dequeue()，但如果你这样做，则需要在回调中调用.queue()。当.dequeue()进行回调时，无需复杂化。

Answer 2

$('.frame').click(function(e) {
    var id = $(this).attr('id');
    e.preventDefault();
    $('.active').removeClass('active').fadeOut(800, function() {
        $('#box' + id).addClass('active').fadeIn(800);
    });
});

如果这不起作用，请提供您的HTML或fiddle。

jQuery FadeIn多次

2 个答案: