Jquery Animation кажется странным - PullRequest
Новая
       6

Jquery Animation кажется странным

0 голосов
/ 29 июня 2018

Мне интересно, что случилось с моим кодом. Этот код должен анимировать все изображения внутри массива. Но каждый раз это будет происходить странно. Надеюсь, что кто-то может помочь мне решить проблему.

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);

Каждый раз, когда изображение исчезает, все изображения отображаются, затем снова исчезают, и наоборот.

1 Ответ

0 голосов
/ 29 июня 2018

Нет смысла использовать $(document).ready() внутри функции, и для анимации всех изображений у вас должна быть начальная точка.

Затем вы анимируете, используя setInterval, который, как известно, не пощадит ваш браузер, даже если он свернут или переключен.

Используйте requestAnimationframe для более плавной и плавной анимации, это также помогает контролировать такие факторы, как переход ноутбука в ноутбук / телефон / планшет в режим работы от аккумулятора и снижение его производительности. Факторы, такие как другая вкладка, принимающая фокус. Подробнее Здесь

Также вместе с 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 в функцию animateIcons(requestId) для того же Для этого вы можете откомментировать код в других функциях, чтобы использовать его, или вы можете полностью удалить его, если планируете его не использовать.

...