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可以使动画更加流畅流畅，它还有助于控制笔记本电脑/手机/平板电脑进入电池模式并降低其性能等因素。诸如其他标签成为焦点的因素。了解更多Here

如果还必须停止播放动画，请与requestAnimationframe一起使用，请使用cancelAnimationFrame。

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

请参见下面的演示，我出于演示目的使用了FontAwesome Icons，因此请在以下内容中进行一些更改

用图像路径替换类名

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传递给了函数{{ 1}}出于相同的目的，您可以取消注释其他部分功能中的代码以使用它，或者如果您打算不使用它们，则可以将其完全删除。

jQuery动画似乎很奇怪

1 个答案: