0

私は現在、小さな「スライダー」に取り組んでいます。側面にクリック可能な 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/

4

2 に答える 2

0

私はこれがあなたを助けると思います

  $(document).ready(function() {
  var delay = 1000;

    $("#button_3").css("background-color", "#FF0"); 

  $('.btn').click(function(){

   var item=$($(this).attr('href'));


    $('.item').each(function(i,v){

            $(v).fadeOut(delay);
            $('#button_'+(i+1)).css("background-color", "#000");



    });   

  item.fadeIn(delay);
             $('#button_'+(item.index()+1)).animate({
        backgroundColor: item.css("background-color")
    }, 1000);
    return false;

   });
});​

デモ: http://jsfiddle.net/VX9Qr/14/

于 2012-10-22T12:38:16.363 に答える
0

短くできます。ボタン、アイテム、アンカーに共通のクラス名を付けます (例: "click"、"item"、"btn"):

$('a.click').each(function(i){
   $(this).click(function(){
      $('.item').fadeOut(1000).eq(i).stop(true).fadeIn(1000);
      $('.btn').animate({backgroundColor:'#000'},1000)
         .eq(i).stop(true).animate({backgroundColor:'#0F0'},1000);
   }        
}).eq(0).click();
于 2012-10-22T15:34:55.580 に答える