jQuery使用fadeOut隐藏内容，并成功地重复fadeIn

Question

我有一个带有类li的mailing-list，它有h4 x3 input[type=text]和span

$('.mailing-list input').fadeOut();
$('.mailing-list span').fadeOut(function(){
    $('.mailing-list').append('<div><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div>').hide().fadeIn().delay(2000).fadeOut(function(){
        $(this).remove();
        $('.mailing-list input, .mailing-list span').fadeIn();
    });
});

当我把前两个

$('.mailing-list span, .mailing-list input').fadeOut(function(){

附加的内容被重复4次。

<div><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div>

有办法简化我的初始代码吗？

html

<li class="mailing-list">
    <h4>Join our mailing list</h4>
    <input type="text" placeholder="First name" class="input half subscribe-first">
    <input type="text" placeholder="Last name" class="input half half-last subscribe-last"> 
    <input type="text" placeholder="Email address" class="input subscribe-email">
    <span class="go subscribe-btn">GO</span>
</li>

目标是隐藏input字段和span，将H4和image放在div中，延迟2秒，然后淡出，在inputs和span中淡出。

Answer 1

使用以下代码：

$(selector).fadeOut( callback );

callback函数将对$(selector)选择的每个节点调用一次。

4节点-> 4调用。

拥有一个函数调用的一种方法是利用由Promise创建的底层fadeOut：

$(selector).fadeOut().promise().done( callback );
// or
$.when( $(selector).fadeOut() ).done( callback );

使用您的代码：

$.when($('.mailing-list span, .mailing-list input')).fadeOut()).done(function(){
    $('.mailing-list').append('<div><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div>').hide().fadeIn().delay(2000).fadeOut(function(){
        $(this).remove();
        $('.mailing-list input, .mailing-list span').fadeIn();
    });
});

然而，它并没有比你已经拥有的更简单。

Answer 2

据我所知，从您的代码片段中可以看出，它很好，不需要简化。

如果按照描述的方式组合选择器，那么将为每个匹配元素调用完整的回调函数，在本例中有四个元素。

只要在<span>块中只有一个.mailing-list元素，附加函数就只会被调用一次。

Answer 3

正如许多人已经说过的，您的目标是使用$('.mailing-list span')的元素集合，因此动画中的回调也是多次触发的。

简化代码的两种方法：

1. 用div包装您的目标内容--允许您稍后向其中添加任意数量的元素。
2. 您还可以将img容器预先加载到标记(隐藏)中，以便您的JavaScript中没有任何标记。

示例

<li class="mailing-list">
    <h4>Join our mailing list</h4>
    <div class="mailing-list-content">
        <input type="text" placeholder="First name" class="input half subscribe-first">
        <input type="text" placeholder="Last name" class="input half half-last subscribe-last"> 
        <input type="text" placeholder="Email address" class="input subscribe-email">
        <span class="go subscribe-btn">GO</span>
    </div>
    <div class="mailing-list-confirmation" style="display:none"><img src="/build/wp-content/themes/andersons/img/icons/tick.png"/></div>
</li>

JavaScript

$('.mailing-list-content').fadeOut(function() {
    var $content = $('.mailing-list-content');
    $content.closest('.mailing-list').find('.mailing-list-confirmation').fadeIn(function(){
        $(this).fadeOut(function() {
            $content.fadeIn();
        });
    });
});