私は次のコードを持っている: -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つの異なる画像の間でどのようにしたいのですか?次のクリックで、サイクルは逆に進む必要があるので、menu-07からmenu-01をロードします(この機能の逆を実行するためのある種のトグル)。
どうすればこの問題を解決できますか?
あなたのフィドルが動作していることを確認していますか? –
@Reddyはい私はそれを試しましたか? – nsilva
これはちょうど灰色の矢印で、下を指して上を指して上を指しているのですが、2回目のクリックで本質的に反対にする必要があります。 – nsilva