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

我有以下代码：-

HTML

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

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个不同的图像。在下一次单击时，循环需要进行相反的循环，因此它将加载menu-07到menu-01（因此某种切换以运行与此功能相反的功能）

我怎样才能做到这一点

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

/*预加载图像*/
var反向=假；
函数myArray（反向）{
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"
];
如果（反向）{
imagesArray.reverse（）；
}
返回图像射线
}
$（'.mobile menu'）。单击（函数（事件）{
var-imagesArray=myArray（反向）；
var指数=0；
var background1=$（“.mobile menu”）；
var background2=$（“.mobile menu”）；
//设置起始背景
背景2.css（“背景”、“url”（““+imagesArray[index]+”）”）；
间隔=设置间隔（更改图像，30）；
间隔
函数changeImage（）{
背景2.css（“背景”、“url”（““+imagesArray[index]+”）”）；
//隐藏我们现在将加载“新”背景的顶部元素
背景1.淡出（10）；
索引++；
如果（索引==6）{
clearInterval（interval）；//停止该间隔
}
如果（索引>=imagesArray.length）{
指数=0；
}
//将顶部元素的背景设置为新背景
背景1.css（“背景”、“url”（“+imagesArray[index]+”）”）；
//淡入顶层元素
背景1.fadeIn（10）；
}
如果（！反向）{
反向=真；
}否则{
反向=假；
}
});
.mobile菜单{
背景：url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png);
背景重复：无重复；
高度：26px；
宽度：26px；
显示：内联块；
边际：7px0；
-webkit转换持续时间：0.8s；
-moz转换持续时间：0.8s；
-o-过渡持续时间：0.8s；
过渡时间：0.8s；
}

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


/*预加载图像*/
var反向=假；
函数myArray（反向）{
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"
];
如果（反向）{
imagesArray.reverse（）；
}
返回图像射线
}
$（'.mobile menu'）。单击（函数（事件）{
var-imagesArray=myArray（反向）；
var指数=0；
var background1=$（“.mobile menu”）；
var background2=$（“.mobile menu”）；
//设置起始背景
背景2.css（“背景”、“url”（““+imagesArray[index]+”）”）；
间隔=设置间隔（更改图像，30）；
间隔
函数changeImage（）{
背景2.css（“背景”、“url”（““+imagesArray[index]+”）”）；
//隐藏我们现在将加载“新”背景的顶部元素
背景1.淡出（10）；
索引++；
如果（索引==6）{
clearInterval（interval）；//停止该间隔
}
如果（索引>=imagesArray.length）{
指数=0；
}
//将顶部元素的背景设置为新背景
背景1.css（“背景”、“url”（“+imagesArray[index]+”）”）；
//淡入顶层元素
背景1.fadeIn（10）；
}
如果（！反向）{
反向=真；
}否则{
反向=假；
}
});
.mobile菜单{
背景：url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/buttons/menu-01.png);
背景重复：无重复；
高度：26px；
宽度：26px；
显示：内联块；
边际：7px0；
-webkit转换持续时间：0.8s；
-moz转换持续时间：0.8s；
-o-过渡持续时间：0.8s；
过渡时间：0.8s；
}
setInterval函数不可用，因为fadeIn/fadeOut已经有一个time和oncomplete回调

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


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",
$('.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);
    }

});