对不起,如果已经回答了此信息。但是我已经搜索了,无法理解该怎么办。
我有一个带有加号图像的Div,并在其下方有一些信息。当我单击加号时,两个divdiv动画都会起来,但是当我再次单击加号时,什么也不会发生。
我希望它可以这样工作 - 单击" plussign俩"div andiant Animate,单击Plussign或将BigDiv放回动画。
这就是我到目前为止得到的:
jQuery(document).ready(function(e){
$('.plussign').click(function(event) {
$('#bigdiv').animate({height : '400px'}, 200);
$('.plussign').animate({bottom : '400px'}, 200);
}).click(function(event) {
$('#bigdiv').animate({height : '80px'}, 200);
$('.plussign').animate({bottom : '80px'}, 200);
});;
});
jQuery(document).ready(function(e){
$('.plussign').toggle(function(event) {
$('#bigdiv').animate({height : '400px'}, 200);
$('.plussign').animate({bottom : '400px'}, 200);
}, function(event) {
$('#bigdiv').animate({height : '80px'}, 200);
$('.plussign').animate({bottom : '80px'}, 200);
});
});
您应该使用切换。尝试以下脚本
jQuery(document).ready(function(e){
$('.plussign').toggle(
function() {
$('#bigdiv').animate({height : '400px'}, 200);
$('.plussign').animate({bottom : '400px'}, 200);
}, function() {
$('#bigdiv').animate({height : '80px'}, 200);
$('.plussign').animate({bottom : '80px'}, 200);
}
);
});
尝试以下:
// BTW, if you're using newer jQuery and no other library that namespaces the $ symbol,
// you can replace that long document.ready line with the following:
// $(function() {
jQuery(document).ready(function(e){
// call just one click function
$('.plussign').click(function(e) {
// using toggle function will allow you to operate between the two clicks
$(this).toggle(function(e) { // click odd
// If both elements are recieving the same action, then call them in the same line,
// simply seperate with a comma
$('#bigdiv, .plussign').stop().animate({height : '400px'}, 200);
// the .stop() function will stop any previous animation and continue with the new,
// this is usefull for FAST CLICKING
},
function(e) { // click even
$('#bigdiv, .plussign').stop().animate({height : '80px'}, 200);
});
});
})
但是
我建议使用基类和切换类并使用jQuery的.toggleclass功能,因为它的编码要少得多,并且更易于控制,因为您可以简单地调整CSS。例如:
CSS
.open {
height: 400px;
}
.closed {
height: 80px;
}
脚本
$(function() {
// if you dont add the closed class to the html element itself on the HTML,
// you can add it here before setting your click event
$('#bigdiv, .plussign').addClass("closed");
// then set your click event with the toggleClass function
$('.plussign').click(function(e) {
$('#bigdiv, .plussign').toggleClass("open closed");
// if you add jQueryUI to the mix you can control the speed in time as follows
// $('#bigdiv, .plussign').toggleClass("open closed", 10000);
});
})