Jquery 动画看起来很奇怪

Question

我想知道我的代码发生了什么。此代码应为数组内的所有图像设置动画。但每次它都会动画奇怪的发生。希望有人能帮我辨别问题。

HTML part.

<div id="container" align="center">
    <div id="slider-wrapper">
        <div id="slider">
            <div class="backgoundImage">
                <div id="images"></div>
            </div>
        </div>
    </div>
</div>

SCRIPT part.

function animate_image(){
         $(document).ready(function(){
            var backgroundImage = new Array(); 
            backgroundImage[0] = "images/image1.jpg";
            backgroundImage[1] = "images/image2.jpg";
            backgroundImage[2] = "images/image3.jpg";
            backgroundImage[3] = "images/image4.jpg";
            backgroundImage[4] = "images/image5.jpg";
            backgroundImage[5] = "images/image6.jpg";
            backgroundImage[6] = "images/image7.jpg";
            $.each(backgroundImage, function(index, value){
                $("#images").append('<div class = "sp"><img src = "' + value + '" /></div>');
                //$('#images img:gt(0)').hide();
                //setInterval(function(){$('#images :first-child').fadeOut().next('img').fadeIn().end().appendTo('#images');}, 1000);
            });
        });
     }

     animate_image();
     $('#images img:gt(0)').hide();
    setInterval(function(){
        $('#images :first-child').fadeOut().next('img').fadeIn().end().appendTo('#images');
    }, 1000);

每次淡出时，所有图像都会显示然后再次淡出，反之亦然。

Answer 1

在函数内部没有使用 $(document).ready()，要为所有图像设置动画，您应该有一个起点。

那么你正在使用 setInterval 制作动画，即使它被最小化或切换到标签页，也不会影响你的浏览器。

使用requestAnimationframe for smoother and fluid animations it also helps to control the factors such as your laptop/ phone/tablet going into battery mode and having its performance reduced. Factors such as another tab taking focus. Read More Here

如果您也必须停止动画，请与 requestAnimationframe 一起使用 cancelAnimationFrame。

首先将图像添加到文档中，然后隐藏除第一张图像之外的所有图像。
通过调用 requestAnimationFrame(animationFunction) 开始动画。
使用SetTimeout对动画进行排队并递归调用requestAnimationFrame(animationFunction) .

请参阅下面的演示，我使用 FontAwesome 图标进行演示，因此请更改以下内容

将class名称替换为图片路径

var backgroundImage = new Array(
    "fa fa-address-book",
    "fab fa-accessible-icon",
    "fa fa-ambulance",
    "fab fa-amilia",
    "fa fa-anchor",
    "fab fa-android",
    "fab fa-angellist",
  );

并更改行

$("#images").append('<div class = "sp"><i class = "' + value + '"></i></div>');

到

$("#images").append('<div class = "sp"><img src= "' + value + '" ></div>');

$(document).ready(function() {

  //background images
  var backgroundImage = new Array(
    "fa fa-address-book",
    "fab fa-accessible-icon",
    "fa fa-ambulance",
    "fab fa-amilia",
    "fa fa-anchor",
    "fab fa-android",
    "fab fa-angellist",
  );

  // store your requestAnimatFrame request ID value
  var requestId;

  //add images to the document
  $.each(backgroundImage, function(index, value) {
    $("#images").append('<div class = "sp"><i class = "' + value + '"></i></div>');
  });

  // hide all but not the first image
  $('#images div.sp').not(':first-child').hide();

  //start animation
  requestAnimationFrame(animate);
});


//the animation function
function animate() {
  setTimeout(function() {

    //save the id returned from the function to use it 
    //for canceling or stopping the animation

    requestId = requestAnimationFrame(animate);

    // animating/drawing code goes here
    animateIcons(requestId);

  }, 2000);
}


function animateIcons(requestId) {
  //get the visile element
  let curElem = $("#images div.sp:visible");

  //if next element exists
  let hasNext = curElem.next().length > 0;

  //if has next sibling
  if (hasNext) {
    //fade out the current element
    curElem.fadeOut(1000, function() {
      //fade in the next sibling
      curElem.next().fadeIn(1000);
    });
  } else {
    // //start animating from the start again
    let firstElem = $("#images div.sp:first-child");
    //fade out the current element
    curElem.fadeOut(1000, function() {
      //fade in the first element again
      firstElem.fadeIn(1000);
    });

    //or you can use the following alternatively
    //  to stop the animation 
    // stopAnimation(requestId);
  }

}

function stopAnimation(requestId) {
  // use the requestID to cancel the requestAnimationFrame call
  cancelAnimationFrame(requestId);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.9em;
  }
</style>
<div id="container" align="center">
  <div id="slider-wrapper">
    <div id="slider">
      <div class="backgoundImage">
        <div id="images"></div>
      </div>
    </div>
  </div>
</div>

我已经在代码中添加了 stopAnimation() 函数，所以如果您想在动画完成所有可以调用的图像后停止动画，我已将 requestId 传递给该函数animateIcons(requestId)出于相同的目的，您可以取消注释函数 else 部分中的代码以使用它，或者如果您不打算使用它，则可以将其完全删除。

Jquery 动画看起来很奇怪

Jquery Animation seems strange

javascript

jquery

dom

jquery-animate