I'm trying to figure out how to make jQuery slide #content2 down and replace #content1 with it while making it look like #content1 is actually being pushed down by #content2 removing it from view...
Then the same button that was clicked to make #content2 replace #content1 would also need to do the reverse effect by replacing #content2 with #content1 making them slide up and push each other out of the way...
I'm not all 开发者_StackOverflowthat great with jQuery so I'm sure I've gone about this the wrong way, but here's what I've tried:
$(document).ready(function() {
$('#click').click(function() {
if($('#content1').is(':visible')) {
$('#content1').slideUp();
}
else {
$('#content2').slideDown();
}
}).click(function() {
if($('#content1').is(':visible')) {
$('#content2').slideDown();
}
else {
$('#content1').slideUp();
}
});
});
You only need to bind click once, and you can toggle the slide effect. You could try something like this
$(document).ready(function() {
$('#click').click(function() {
$('#content1').slideToggle();
$('#content2').slideToggle();
}
}
Now you are trying to bind two click event handlers to the same element.
This is not possible the way you try but with namespaced events it is:
$(#click).bind('click.event1')
and then later .bind('click.event2')
However you can to all in one function:
$(document).ready(function() {
// Pre selected for increased speed
var content1 = $('#content1');
var content2 = $('#content2');
$('#click').click(function() {
content1.slideToggle();
content2.slideToggle();
});
});
It won't be in perfekt synchronization but will probably look OK.
精彩评论