jQuery - 图像替换动画（切换）

时间：2016-04-01 09:09:14

标签： jquery

我有以下代码： -

HTML 

<div class="mobile-menu"></div>

CSS 

.mobile-menu {
    background: url(../img/buttons/menu-01.png);
    background-repeat: no-repeat;
    height: 26px;
    width: 26px;
    display: inline-block;
    margin: 7px 0;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

的jQuery 

$('.mobile-menu').click(function(event){

    var index = 0;
    var imagesArray = ["http://planetbounce.m360.co.uk//wp-content/themes/planetbounce/assets/img/buttons/menu-01.png", 
                       "http://planetbounce.m360.co.uk//wp-content/themes/planetbounce/assets/img/buttons/menu-02.png",
                       "http://planetbounce.m360.co.uk//wp-content/themes/planetbounce/assets/img/buttons/menu-03.png", 
                       "http://planetbounce.m360.co.uk//wp-content/themes/planetbounce/assets/img/buttons/menu-04.png", 
                       "http://planetbounce.m360.co.uk//wp-content/themes/planetbounce/assets/img/buttons/menu-05.png", 
                       "http://planetbounce.m360.co.uk//wp-content/themes/planetbounce/assets/img/buttons/menu-06.png", 
                       "http://planetbounce.m360.co.uk//wp-content/themes/planetbounce/assets/img/buttons/menu-07.png"];
    var background1 = $(".mobile-menu");
    var background2 = $(".mobile-menu");

    //Set the starting background
    background2.css("background","url('"+ imagesArray[index] +"')");
    interval = setInterval(changeImage,30);
    interval;

    function changeImage(){

        background2.css("background","url('"+ imagesArray[index] +"')");

        //Hide the top element which we will load the "new" background in now
        background1.fadeOut(10);

        index++;

        if(index == 6) {
            clearInterval(interval); // stop the interval
        }
        if(index >= imagesArray.length){
            index = 0;
        }

        //Set the background of the top element to the new background
        background1.css("background","url('"+ imagesArray[index] +"')");
        //Fade in the top element
        background1.fadeIn(10);
    }

});

基本上，这可以激发7种不同图像之间的关系。在下一次单击时，循环需要反过来，因此它会将菜单-07加载到menu-01（所以某种切换操作与此函数相反）。

我怎样才能做到这一点？

SEE JSFIDDLE

2 个答案:

答案 0 :(得分：1)

锁定：your jsFiddle我创建了一个新函数，可以在需要时反转数组。

＆＃13;
＆＃13; 
/* Preload Image */
var reverse = false;

function myArray(reverse) {
  var imagesArray = ["http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png",
    "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-02.png",
    "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-03.png",
    "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-04.png",
    "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-05.png",
    "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-06.png",
    "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-07.png"
  ];

  if (reverse) {
    imagesArray.reverse();
  }
  
  return imagesArray
}


$('.mobile-menu').click(function(event) {
 	var imagesArray = myArray(reverse); 
  var index = 0;

  var background1 = $(".mobile-menu");
  var background2 = $(".mobile-menu");

  //Set the starting background
  background2.css("background", "url('" + imagesArray[index] + "')");
  interval = setInterval(changeImage, 30);
  interval;

  function changeImage() {

    background2.css("background", "url('" + imagesArray[index] + "')");

    //Hide the top element which we will load the "new" background in now
    background1.fadeOut(10);

    index++;

    if (index == 6) {
      clearInterval(interval); // stop the interval
    }
    if (index >= imagesArray.length) {
      index = 0;
    }

    //Set the background of the top element to the new background
    background1.css("background", "url('" + imagesArray[index] + "')");
    //Fade in the top element
    background1.fadeIn(10);


  }

		if(!reverse) {
    	reverse = true;
    } else {
    	reverse = false;
    }

});
＆＃13; 
.mobile-menu {
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png);
  background-repeat: no-repeat;
  height: 26px;
  width: 26px;
  display: inline-block;
  margin: 7px 0;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="mobile-menu"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

它没有使用setInterval函数，因为fadeIn / fadeOut已经有一个时间和不完整的回调。

我建议在图像的上下方向预加载图像和动画：

＆＃13;
＆＃13; 
var imagesArray = ["http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png",
                   "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-02.png",
                   "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-03.png",
                   "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-04.png",
                   "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-05.png",
                   "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-06.png",
                   "http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-07.png"];




function preloadImg(pictureUrls, callback) {
  var i, j, loaded = 0;
  var imagesArray = [];

  for (i = 0, j = pictureUrls.length; i < j; i++) {
    imagesArray.push(new Image());
  }
  for (i = 0, j = pictureUrls.length; i < j; i++) {
    (function (img, src) {
      img.onload = function () {
        if (++loaded == pictureUrls.length && callback) {
          callback(imagesArray);
        }
      };
      img.src = src;
    }(imagesArray[i], pictureUrls[i]));
  }
};


function changeImage(background, imagesArray, index, reverse) {
  background.css("background-image", "url('" + imagesArray[index].src + "')").fadeIn(10, function() {
    if (reverse) {
      index--;
      if (index == -1) {
        return; // stop the interval
      }
    } else {
      index++;
      if (index == imagesArray.length) {
        return; // stop the interval
      }
    }
    //Fade in the top element
    background.fadeOut(10, function () {
      //Set the background of the top element to the new background
      background.css("background-image", "url('" + imagesArray[index] + "')");
      changeImage(background, imagesArray, index, reverse);
    });
  });
}



$(function () {
  /* Preload Image */
  preloadImg(imagesArray, function (imagesArray) {
    $(".mobile-menu").css("background-image", "url('" + imagesArray[0].src + "')")
    $('.mobile-menu').on('click', {imgs: imagesArray}, function (event) {
      var background = $(".mobile-menu");
      var bi = background.css('background-image');
      var index = 0;
      var reverse = false;
      if (imagesArray[0].src != bi.replace('url("', '').replace('")', '')) {
        index = imagesArray.length - 1;
        reverse = true;
      }
      changeImage(background, event.data.imgs, index, reverse);
    });
  });
});
＆＃13; 
.mobile-menu {
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png);
  background-repeat: no-repeat;
  height: 26px;
  width: 26px;
  display: inline-block;
  margin: 7px 0;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<div class="mobile-menu"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题