jQuery的 - 圖像替換動畫（切換）

Question

我有以下代碼： -

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加載到菜單01（因此某種切換來運行此功能的相反）。

我該如何做到這一點？

SEE JSFIDDLE

Answer 1

這是unusefull的setInterval函數，因爲淡入/淡出已經時間和回調的onComplete。

我的預加載imaages和動畫在向上或向下方向的圖像的建議是：

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

.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; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

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

Answer 2

鎖定在此：your jsFiddle我提出需要時顛倒了數組的新功能。

/* 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) { 
 
    \t 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); 
 

 

 
    } 
 

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

 
});

.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="mobile-menu"></div>