私はこの例を持っています:クリック!
次の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%"
});
});
しかし、ご覧のとおり、これは非常に醜いコードです。そして、多くのスペースを占有します。どうすればそれから関数を作ることができますか?または、コードを短縮するにはどうすればよいですか?