Question

以下提到的功能开始起作用之前，似乎有一段时间的延迟。我无法确定为什么会这样。有人可以指导我吗？

这些图像最初会显示，但是没有淡入或淡出效果，但是一旦所有图像都完成了第一个循环，动画就会起作用。

JS：

$(function fadeAnimation() {
  $(".imageClass img:gt(0)").hide();
  setInterval(function fadeAnimation() {
    $(".imageClass :first-child")
      .fadeOut(3000)
      .next("img")
      .fadeIn(3000)
      .end()
      .appendTo(".imageClass");
  }, 5500);
});

HTML：

<div class="slidesDiv" id="cust">
<img class="imageClass" src="images/Folder1/1.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/2.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/3.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/4.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/5.jpg?" alt="" />
</div>

Answer 1

您的代码中有几个问题。

<?php include ("vars.php"); class mouth { private $teeth = array( FIRST_EX=>'$var['var1']', SECOND_EX=>'$var['var2']' ); public $forms = array( 'signin'=>array( 'fields'=>array( 'username'=>array('type'=>'text','placeholder'=>'$var['var3']','icon'=>'envelope'), 'password'=>array('type'=>'password','placeholder'=>'$var['var4']','icon'=>'lock') ), 'submit'=> '$var['var5']', 'message'=> '$var['var6']' ); ?>是.imageClass ...您必须使用容器的类，即<img>。
您必须使用动画的回调...现在，.slidesDiv和.fadeIn()同时执行。
您的时间安排不正确...动画耗时6秒，但您将间隔设置为5.5秒。

有关详细信息，请参见代码中的注释。

.fadeOut

$(function fadeAnimation() {

  // Hide all image
  $(".slidesDiv img").hide();

  // Fade the first in right away.
  $(".slidesDiv :first-child")
    .fadeIn(3000);

  // Start the interval to loo through all image
  // The interval will execute for the first time in 6 seconds from now.
  setInterval(function fadeAnimation() {
  
    // Fade the first out.
    $(".slidesDiv :first-child")
      .fadeOut(3000, function(){ // This is a "callback" when the fade out is complete
        
        // Fade In the next image
        $(this).next("img")
          .fadeIn(3000);
          
        // append the faded out image to the end of the container.
        $(this).appendTo(".slidesDiv");
      });
  }, 6000);
  
});

js函数加载中的时间延迟

1 个答案: