Question

在我为每个操作设置单个函数的那一刻，我在点击一段时间内淡出不同的div，我将它们命名为.fade-a，.fade-b，.fade-c等。当然必须有一个更好的方法来做到这一点，因为我只是在列表看起来很臃肿。

对不起，如果我没有解释得这么好，我不会使用太多的jQuery。

由于

$('.fade-a').click(function() {
    $('.fade-a').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-a").removeClass("fade");
    }, 1000)
});
$('.fade-b').click(function() {
    $('.fade-b').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-b").removeClass("fade");
    }, 1000)

});
$('.fade-c').click(function() {
    $('.fade-c').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-c").removeClass("fade");
    }, 1000)

});
$('.fade-d').click(function() {
    $('.fade-d').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-d").removeClass("fade");
    }, 1000)

});

HTML：

<div class="width33 site-top">
    <span>
        <img class="info-block-toggle-a fade-a site-overlay size-auto" src="images/i-am-the-cosmos.jpg" alt="" />
    </span>
</div>
<div class="width33 site-middle">
    <span>
        <img class="info-block-toggle-b fade-b site-overlay size-auto" src="images/dorje.jpg" alt="" />
    </span>
</div>
<div class="width33 site-bottom">
    <span>
        <img class="info-block-toggle fade-c site-overlay size-auto" src="images/harvey.png" alt="" />
    </span>
</div>

CSS：

.fade-a, .fade-b, .fade-c, .fade-d, .fade-e, .fade-f, .fade-g, .fade-h, .fade-i {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
.fade-a.fade, .fade-b.fade, .fade-c.fade, .fade-d.fade, .fade-e.fade, .fade-f.fade, .fade-g.fade, .fade-h.fade, .fade-i.fade {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

Answer 1

对所有这些类使用相同的类（例如fademe）并执行此操作：

$('.fademe').click(function() {
    var $this = $(this);
    $this.addClass('fade');
    setTimeout(function() {
        $this.removeClass("fade");
    }, 1000)
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/kLgua7kf/

备注：

在点击事件中，this是点击的DOM元素。 $(this)是同一元素的jQuery对象。您需要保留对原始this的引用，例如在var中，因为this回调中的setTimeout不同。

使用$添加jQuery变量名称只是一个常见的标准。无论你喜欢什么，都可以打电话：）

我使用绿色边框显示您的fade课程，因为图片不可用。

Answer 2

这增强了@TrueBlueAssie的答案，以符合更简单的＆＃34; OP要求的方式。但是＆＃34;更简单＆＃34;在这个上下文中，在click处理程序中代表了一个更有意义且易于理解的代码，试图利用更多jquery和JS coolness。

我将使用.makeme - ＆gt; .big个类，而不是.fademe - ＆gt; .fade。

首先让我们在每个处理程序中使用jquery队列来处理正确的执行：

$( ".makeme" ).on( "click", function( event ) {
  var $element = $( event.currentTarget );
  $({})
    .queue(function( next ) {
      $element.addClass( "big" );
      next();
    })
    .delay( 1000 )
    .queue(function( next ) {
      $element.removeClass( "big" );
      next();
    });
});

链接：http://jsfiddle.net/kxhpu4z6/

就是这样。

我们甚至可以在工厂中玩一点来创建执行单个jQuery方法的每个队列回调并为我们处理next调用：

// queueCallback by Fagner Brack (MIT Licensed)
// Create a callback for jquery queue mechanism that executes a single
// jquery method once resolved.
function queueCallback( element, method ) {
  var methodArgs = [].slice.call( arguments, 2 );
  var $element = $( element );
  return function( next )  {
    method.apply( $element, methodArgs );
    next();
  };
}

点击处理程序现在写成：

$( ".makeme" ).on( "click", function( event ) {
  var element = event.currentTarget;
  $({})
    .queue( queueCallback( element, $.fn.addClass, "big" ) )
    .delay( 1000 )
    .queue( queueCallback( element, $.fn.removeClass, "big" ) );
});

链接：http://jsfiddle.net/kxhpu4z6/2/

在点击元素或1s延迟结束后，可以修改片段以适应每个所需的行为。

编辑：请勿使用

我发现在jquery构造函数中使用普通对象的自定义队列是NEVER SUPPORTED。

它从未被记录过，并且jquery 3.0中不推荐使用支持的普通对象。因此，如果您需要一个正确的jquery队列，您可以为此目的使用或创建一个自定义插件，并使用合适的语法。

是否有更简单的方法将多个类添加到不同的div jquery

2 个答案: