私は現在、小さな「スライダー」に取り組んでいます。側面にクリック可能な 3 つのブロックがあるスライダー。ブロックの 1 つをクリックすると、「スライド」が対応するスライドに変更される必要があります。これは私にとって大きな問題ではありませんでした。
しかし、私が望んでいた 2 番目のオプションは、スライド間にループ アニメーションがあることです。しかし、それは私が完了できなかったものです。そして今、私の質問は次のとおりです。これを行う簡単な方法はありますか?
$(document).ready(function() {
$("#button_1").css("background-color", "#0F0");
$("a#click_1").click(function() {
$("#item_1").fadeIn(1000);
$("#item_2").fadeOut(1000);
$("#item_3").fadeOut(1000);
$("#button_1").animate({
backgroundColor: "#0F0"
}, 1000);
$("#button_2").animate({
backgroundColor: "#000"
}, 1000);
$("#button_3").animate({
backgroundColor: "#000"
}, 1000);
});
$("a#click_2").click(function() {
$("#item_1").fadeOut(1000);
$("#item_2").fadeIn(1000);
$("#item_3").fadeOut(1000);
$("#button_1").animate({
backgroundColor: "#000"
}, 1000);
$("#button_2").animate({
backgroundColor: "#00F"
}, 1000);
$("#button_3").animate({
backgroundColor: "#000"
}, 1000);
});
$("a#click_3").click(function() {
$("#item_1").fadeOut(1000);
$("#item_2").fadeOut(1000);
$("#item_3").fadeIn(1000);
$("#button_1").animate({
backgroundColor: "#000"
}, 1000);
$("#button_2").animate({
backgroundColor: "#000"
}, 1000);
$("#button_3").animate({
backgroundColor: "#FF0"
}, 1000);
});
});
私はすでにこのフィドルを持っています: http://jsfiddle.net/Yauhnhan/VX9Qr/7/