Question

我在各种ID上同时发生了多次淡出，有没有办法在一行中设置这个例子：

这：

$("#bottle").on('click', function() {
  $("#container_inner01").fadeIn(1100);
  $("#container_inner02").fadeOut(1100);
  $("#container_inner03").fadeOut(1100);
  $("#container_inner04").fadeOut(1100);
  $("#container02").fadeOut(1100);
})

将其转为：

$("#bottle").on('click', function() {
  $("#container_inner01").fadeIn(1100);
  $("#container_inner02,#container_inner02,#container_inner03,#container_inner04,#container02").fadeOut(1100);
})

我确信它可能并且我正在做一些语法错误。

Answer 1

为什么不给你的元素class并以这种方式执行脚本？

$("#bottle").on('click', function () {
    $("#container_inner01").fadeIn(1100);
    $('.test').fadeOut(1100);
});

JsFiddle demo

Answer 2

试试这个

(function($){
    $("#bottle").on('click', function() {
        $('#container_inner01').fadeIn(1100);
        $('#container_inner02,#container_inner03,#container_inner04,#container02').fadeOut(1100);
    });
})(jQuery);

Answer 3

在第二个脚本中执行您的操作：

$("#bottle").on('click', function() {
  $("#container_inner01").fadeIn(1100);
  $("#container_inner02,#container_inner02,#container_inner03,#container_inner04,#container02").fadeOut(1100);
});

可行，但你可以总结一下：

$("#bottle").on('click', function() {      
    $("#container_inner01").fadeIn(1100);
    $("#container_inner02,#container_inner03,#container_inner04,#container02").fadeOut(1100);
});

请注意，您的脚本重复了#container_inner02,#container_inner02。另一种方法是向所有类添加一个类，并使用该类影响每个项：

$("#bottle").on('click', function() {      
    $("#container_inner01").fadeIn(1100);
    $(".myClassName").fadeOut(1100);
});

简化javascript

3 个答案: