1

私はこの例を持っています：クリック！

次のjqueryを使用します。

$(".abox-1").click(function(){
    $("#box-2, #box-3").css({
        zIndex: "-999"
    });
    $("#box-1").css({
        zIndex: "999"
    });
    $("#box-1").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-2, #box-3").stop().delay(1000).animate({
        top: "100%"
    });
});
$(".abox-2").click(function(){
    $("#box-2").css({
        zIndex: "999"
    });
    $("#box-2").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-1, #box-3").css({
        zIndex: "-999"
    });
    $("#box-1, #box-3").stop().delay(1000).animate({
        top: "100%"
    });
});
$(".abox-3").click(function(){
    $("#box-1, #box-2").css({
        zIndex: "-999"
    });
    $("#box-3").css({
        zIndex: "999"
    });
    $("#box-3").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-2, #box-1").stop().delay(1000).animate({
        top: "100%"
    });
});

しかし、ご覧のとおり、これは非常に醜いコードです。そして、多くのスペースを占有します。どうすればそれから関数を作ることができますか？または、コードを短縮するにはどうすればよいですか？

4

2 に答える 2

2

多分このようなもの？

$(document).ready(function(){
    $('a[class^="abox"]').click(function() {
        if (this.className == 'abox') {
            $('div[id^=box-]').animate({top: '100%'}, 1000, "easeInOutExpo").css({zIndex: "-999"});
        }else{
            var thisbox = $('#'+this.className.replace('a', '')),
                otherbox = $('div[id^=box-]').not(thisbox);

            otherbox.css({zIndex: "-999"}).stop().delay(1000).animate({top: '100%'});
            thisbox.css({zIndex: "999"}).stop().animate({top: '0%'}, 1000, "easeInOutExpo");
        }
    });
});

フィドル </p>

于 2012-04-22T12:04:25.077 に答える
1

クラスabox-iをIDに変更aboxiし、次のコードを使用する必要があります。

function show_box(number) {
  for(var i = 1; i <= 3; i++) {
    if (i == number) { // we need to show this element
      $("#box-" + i).css({
        zIndex: "999"
      }).stop().animate({
        top: "0%"
      }, 1000, "easeInOutExpo");
    } else { // we need to hide this element
      $("#box-"+i).css({
        zIndex: "-999"
      }).stop().delay(1000).animate({
        top: "100%"
      });
    }
  }
}

$("#nav a").click(function() {
  var id = parseInt(this.id.substr(4));
  if (id > 0) show_box(id);   
});

JsFiddle

于 2012-04-22T11:53:50.747 に答える