Question

我有以下内容：

<script>
$(document).ready(function () {
    $('#submit1').click(function () {
        $('.items').fadeOut('slow', function () {
            $('#item1').fadeIn('slow');
        });
    });
    $('#submit2').click(function () {
        $('.items').fadeOut('slow', function () {
            $('#item2').fadeIn('slow');
        });
    });
});
</script>

<div class="items" id="item1"></div>
<div class="items" id="item2"></div>

<input id="submit1" value="Click Me1"/></br>
<input id="submit2" value="Click Me2"/>

我想要实现的是当我单击按钮时所有.items fadeOut，然后选定的#itemx淡出。（n.b。可能会有更多条目）

目前这两个动作同时发生，导致第二个动作跳跃＆＃39;一旦它加载。我希望这更顺畅。

我已经看到围绕$(this)和next()的各种选项，但无法看到如何将它们应用到我的问题中。

Answer 1

由于您需要多个元素才能完成淡入淡出，请使用.when（）和.done（）：

$('#submit1').click(function () {
    $.when($('.items').fadeOut('slow')).done(function () {
        $('#item1').fadeIn('slow');
    });
})
$('#submit2').click(function () {
    $.when($('.items').fadeOut('slow')).done(function () {
        $('#item2').fadeIn('slow');
    });
})

<强> jsFiddle example

此外，通过添加类和数据属性，您可以将其缩短为五行 - jsFiddle example

Answer 2

好的，我明白你现在在说什么。

尝试仅定位.items这样可以淡出的$(document).ready(function () { $('#submit1').click(function () { $('.items:visible').fadeOut('slow', function () { $('#item1').fadeIn('slow'); }); }); $('#submit2').click(function () { $('.items:visible').fadeOut('slow', function () { $('#item2').fadeIn('slow'); }); }); ..

<强>的Javascript

:visible

}）;

请注意将.items添加到{{1}}

的选择器中

http://jsfiddle.net/nm3o7d4L/1/

Answer 3

如果我已正确理解问题，答案将在fadeOut的文档中给出：

如果动画了多个元素，请务必注意每个匹配元素执行一次回调，而不是整个动画执行一次。

由于在大多数情况下，其中一个元素已经淡出，其动画会立即结束，从而触发对.fadeIn()的调用。有关如何修复此问题的更多信息，以便仅在fadeOut动画的全部完成后才启动新功能：

从jQuery 1.6开始，.promise（）方法可以与deferred.done（）方法结合使用，在所有匹配元素完成动画时，为整个动画执行单个回调。

有一个关于如何执行此操作的示例的链接，但基本上代码可归结为以下内容：

$(document).ready(function () {
    $('#submit1').click(function () {
        $('.items').fadeOut('slow').promise().done(function() {
            $('#item1').fadeIn('slow');
        });
    });
    $('#submit2').click(function () {
        $('.items').fadeOut('slow').promise().done(function() {
            $('#item2').fadeIn('slow');
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="items" id="item1">This is content 1</div>
<div class="items" id="item2">This is content 2</div>

<input id="submit1" value="Click Me1"/></br>
<input id="submit2" value="Click Me2"/>

Answer 4

单击处理程序也可以......

只需比较您的ID ......

$(document).ready(function() {
    $('.submit').click(function() {
        $submit = jQuery(this);
        var submit_id = parseInt($submit.attr('id').replace('submit', ''), 10);

        var $items = $('.items');
        $items.each(function() {
            $div = jQuery(this);
            var div_id = parseInt($div.attr('id').replace('item', ''), 10);

            $div.fadeOut('slow', function() {
                if (div_id == submit_id) {
                    $div.fadeIn('slow');
                }
            });
        });
    }); 
});

这是DEMO

Answer 5

您可能希望使用动画来避免这种“跳跃”。

$('.items').animate({ opacity: 0 }, function(){
     $('#item2').animate({opacity: 1});
});

看看我的例子:) http://jsfiddle.net/cx6fp3pb/

单击“按钮”以淡出所有内容，然后单击“淡化一个项目”

5 个答案: