无法合并2个选择器

Question

我有一个脚本，该脚本会淡出带有暂停的图片，然后再将其淡入。我想向脚本中添加更多元素，以便它们都同时淡出（如果我有单独的脚本，它们不会在淡出时淡出）同一时间）。

var fadeinBox = $("#box2, #icons1");
var fadeoutBox = $("#box1, #icons2");

function fade() {
    fadeinBox.stop(true, true).fadeIn(2000);

    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        setTimeout(fade, 2000);
    });
}

fade();

如果我仅使用一个选择器t.ex，则脚本可以正常工作。 var fadeinBox = $("**#box2**") 。 但是，如果我有很多，它们将不起作用。

Answer 1

你很近。 我们将在此处利用Promise确保功能按正确的顺序运行。

我们从fadeIn()返回.promise() ，在内部执行fadeOut()调用中添加一个.done()调用，并.promise()返回.promise() 。 通过返回另一个promise，我们可以将第二个.done()附加到链上以翻转指针并设置超时。

 var $fadeIn = $("#box2, #icons1"); var $fadeOut = $("#box1, #icons2"); function fade() { $fadeIn .fadeIn(2000) .promise() .done(function () { return $fadeOut .fadeOut(2000) .promise(); }) .done(function() { var $temp = $fadeIn; $fadeIn = $fadeOut; $fadeOut = $temp; setTimeout(fade, 2000); }); } fade(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box1">Box 1</div> <div id="box2">Box 2</div> <div id="icons1">Icons 1</div> <div id="icons2">Icons 2</div> 

参考文献：

• https://api.jquery.com/promise/

Answer 2

（假设我正确理解了这个问题）我认为您遇到的问题是：

1. 您正在准备页面上的项目，例如：var fadeinBox = $（“＃box2，＃icons1”）;
2. 新内容正在添加到DOM
3. 淡入淡出功能被调用，但“新”元素没有被“淡入淡出”

问题在于，无论何时调用jQuery（），它仅收集在调用查询时可以看到的元素。

为了使代码正常工作，您可能需要将选择器移入函数调用中，以便每次调用它时都重新查询元素，例如：

function fade() {
    var fadeinBox = $("#box2, #icons1");
    var fadeoutBox = $("#box1, #icons2");

    fadeinBox.stop(true, true).fadeIn(2000);

    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        setTimeout(fade, 2000);
    });
}

如果对您的应用程序有意义，那么是否可以使用类而不是id还要考虑。 即使大多数浏览器都可以使用重复的id标签来容忍多个元素，但这并不是一个好习惯。