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();
    });
});

当我将前2个组合成

时

$('.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个节点 - ＆gt; 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

据我所知，你的代码片段很好，不需要简化。

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

只要您的<span>块中只有一个.mailing-list元素，附加函数将只调用一次。

Answer 3

就像许多人已经说过的那样，你使用$('.mailing-list span')定位了一系列元素，因此来自动画的回调也会被触发多次。

两种简化代码的方法：

使用div包装目标内容 - 允许您稍后向其添加任意数量的元素。
您也可以将img容器预先加载到标记中（隐藏），这样您的JavaScript中就没有任何标记。

示例HTML

<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();
        });
    });
});

jQuery使用fadeOut隐藏内容并淡化成功重复

3 个答案: