我有这个例子:Click!
使用以下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%"
});
});
但是,正如你所看到的,这是非常难看的代码!并占用了大量空间。我该如何制作一个功能呢?或者我如何缩短代码?
答案 0 :(得分: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");
}
});
});
答案 1 :(得分: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);
});