我有以下代码: -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加载到菜单01(因此某种切换来运行此功能的相反)。
我该如何做到这一点?
你确定你的小提琴在工作? –
@Reddy是啊我只是试过吗? – nsilva
这只是一个灰色的箭头,从向下指向指向上点击,需要做相反的第二次点击,实质上是在每次点击时在两者之间切换 – nsilva