使用jQuery的图像slideDown，slideUp不起作用

Question

我在一个 div 中有三个图像。 div 中的图像具有一个在另一个之后的绝对位置。我希望它们一张一张地朝下。 Img1 会先向下滑动，然后再向上滑动。之后，Img2 将上下滑动，依此类推。我给 img2 和 imd3 一些延迟作为等待时间。我只能看到 img3 上下滑动。我在做什么错？有没有更好的方法来处理多个图像？如果我给不同位置的敌人图像，那么所有图像都会上下滑动。

$(document).ready(function() {
  $("#img1").slideDown(500).delay(500).slideUp(500);
  $("#img2").delay(1500).slideDown(500).delay(500).slideUp(500);
  $("#img3").delay(3000).slideDown(500).delay(500).slideUp(500);
});

body {
  margin: 50px 0;
  padding: 0;
  text-align: center;
}

#showPic {
  position: relative;
}

#img1 {
  position: absolute;
  left: 150;
  top: 100px;
}

#img2 {
  position: absolute;
  left: 150;
  top: 100px;
}

#img3 {
  position: absolute;
  left: 150;
  top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Have a glance !</h1>
<div id="showPic">
  <img id="img1" src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="500px" width="500px">
  <img id="img2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" height="500px" width="500px">
  <img id="img3" src="https://images.unsplash.com/photo-1474524955719-b9f87c50ce47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80" height="500px" width="500px">
</div>

Answer 1

$(document).ready(function() {
  $("#img1").slideDown(500).delay(500).slideUp(500);
  $("#img2").delay(1500).slideDown(500).delay(500).slideUp(500);
  $("#img3").delay(3000).slideDown(500).delay(500).slideUp(500);
});

#showPic {
  position: relative;
}

#img1 {
  position: absolute;
  left: 150;
  top: 50px;
  display: none;
}

#img2 {
  position: absolute;
  left: 150;
  top: 50px;
  display: none;
}

#img3 {
  position: absolute;
  left: 150;
  top: 50px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="img1" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.cnbcfm.com%2Fapi%2Fv1%2Fimage%2F106256503-1574274174070yoda.jpg%3Fv%3D1574274186&f=1&nofb=1" alt="Trulli" width="250" height="150">
<img id="img2" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpmcvariety.files.wordpress.com%2F2019%2F12%2Fbaby-yoda-plush-toy-mattel-the-mandalorian.png%3Fw%3D1000%26h%3D563%26crop%3D1&f=1&nofb=1" alt="Trulli" width="250" height="150">
<img id="img3" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Ft_original%2Foicrsr3wwqi6u3buvvxx.jpg&f=1&nofb=1" alt="Trulli" width="250" height="150">

Answer 2

最好为您的容器和幻灯片设置唯一的类，使用每个函数来循环滑块容器中的每个图像（幻灯片）。

$(document).ready(function() {
  var sliderDelay = 2500; // delay between each slides exept the first one
  var sliderEffectIn = "slideDown"; // effect in : slideDown, fadeIn, show
  var sliderEffectOut = "slideUp"; // effect out : slideUp, fadeOut, hide
  var sliderEffectDuration = 500; // duration of effect
  
  // we loop on each slides in slider container
  $('.slider .slide').each(function(index, element) {
    // if first slide = no delay
    if (index == 0) {
      $(element)[sliderEffectIn](sliderEffectDuration, function() {
       $(this).delay(sliderEffectDuration)[sliderEffectOut](sliderEffectDuration);
      });
    } else {
      $(element).delay(sliderDelay * index)[sliderEffectIn](sliderEffectDuration, function() {
         $(this).delay(sliderEffectDuration)[sliderEffectOut](sliderEffectDuration);
      }); 
    }   
  });
});

.slider {
  position: relative;
}

.slide {
  position: absolute;
  left: 150;
  top: 50px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">
  <img class="slide" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.cnbcfm.com%2Fapi%2Fv1%2Fimage%2F106256503-1574274174070yoda.jpg%3Fv%3D1574274186&f=1&nofb=1" alt="Trulli" width="250" height="150">
  <img class="slide" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpmcvariety.files.wordpress.com%2F2019%2F12%2Fbaby-yoda-plush-toy-mattel-the-mandalorian.png%3Fw%3D1000%26h%3D563%26crop%3D1&f=1&nofb=1" alt="Trulli" width="250" height="150">
  <img class="slide" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Ft_original%2Foicrsr3wwqi6u3buvvxx.jpg&f=1&nofb=1" alt="Trulli" width="250" height="150">
</div>

Answer 3

您需要在图像上添加初始display: none;，以便它们能够使用slideDown，以及所有其他效果，如淡入、显示等（与动画不透明度为 1 相同，您需要初始不透明度为 0 ，可见性也是如此）。

由于它们都堆叠在一起，因此您的最后一个只是显示在其他之上..

$(document).ready(function() {
  $("#img1").slideDown(500).delay(500).slideUp(500);
  $("#img2").delay(1500).slideDown(500).delay(500).slideUp(500);
  $("#img3").delay(3000).slideDown(500).delay(500).slideUp(500);
});

#showPic {
  position: relative;
}

#img1 {
  position: absolute;
  left: 150;
  top: 50px;
  display: none;
}

#img2 {
  position: absolute;
  left: 150;
  top: 50px;
  display: none;
}

#img3 {
  position: absolute;
  left: 150;
  top: 50px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="img1" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.cnbcfm.com%2Fapi%2Fv1%2Fimage%2F106256503-1574274174070yoda.jpg%3Fv%3D1574274186&f=1&nofb=1" alt="Trulli" width="250" height="150">
<img id="img2" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpmcvariety.files.wordpress.com%2F2019%2F12%2Fbaby-yoda-plush-toy-mattel-the-mandalorian.png%3Fw%3D1000%26h%3D563%26crop%3D1&f=1&nofb=1" alt="Trulli" width="250" height="150">
<img id="img3" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Ft_original%2Foicrsr3wwqi6u3buvvxx.jpg&f=1&nofb=1" alt="Trulli" width="250" height="150">