jQuery animate one Div to move down when another one animates up

问题

I have 3 divs on my page, A, B and C. When I click on A I want it to move up by 200px and add the class "active", and when I click on it again, it moves back down and removes the active class. I have managed to do this, however, I now need to make it so only one div is ever active, so If one div is up (or "active") and I click another, the "active" div moves down first and then the other div moves up.

For example, if A is active and I click on B, A must move down first and then B move up.

Here is my code for moving the divs (you will see there is also a "close_A" element which is just a cross that closes the div also):

$(document).ready(function() {

    // OPEN AND CLOSE A //

    $('.A').toggle(function() {
        $('.A').animate({
            top: '-=200'
        }, 1000).addClass('active');
    },function() {
        $('.A').animate({
            top: '+=200'
        }, 1000).removeClass('active');
    })
    $('.close_A').click(function() {
        $(".A").click();
    });

    // OPEN AND CLOSE B //

    $('.B').toggle(function() {
        $('.B').animate({
            top: '-=200'
        }, 1000).addClass('active');
    },function() {
        $('.B').animate({
            top: '+=200'
        }, 1000).removeClass('active');
    })
    $('.close_B').click(function() {
        $(".B").click();
    });

    // OPEN AND CLOSE C //

    $('.C').toggle(function() {
        $('.C').animate({
            top: '-=200'
        }, 1000).addClass('active');
    },function() {
        $('.C').animate({
            top: '+=200'
        }, 1000).removeClass('active');
    })
    $('.close_C').click(function() {
        $(".C").click();
    });
});

So my question now is, how can I make it so that when one is open, and I click on another, it closes the open one first.

回答1:

Think I have found an answer...although there MUST be a shorter way of doing this (by the way I have changed A, B and C to Who, What and Why respectively):

$(document).ready(function() {

// OPEN AND CLOSE WHO //    

$('.who').click(function() {

// IF WHAT IS OPEN, CLOSE FIRST, THEN OPEN WHO

if($('.what').hasClass('active')) {
$('.what').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.who').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHY IS OPEN, CLOSE IT FIRST, THEN OPEN WHO

else if($('.why').hasClass('active')) {
$('.why').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.who').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHO IS OPEN, CLICK TO CLOSE IT

else if($('.who').hasClass('active')) {
$('.who').animate({
  top: '+=200'
}, 1000).removeClass('active');
}

// IF NOTHING IS OPEN, CLICK TO OPEN WHO

else
$('.who').animate({
  top: '-=200'
}, 1000).addClass('active');


});

// OPEN AND CLOSE WHAT //   

$('.what').click(function() {

// IF WHO IS OPEN, CLOSE FIRST, THEN OPEN WHAT

if($('.who').hasClass('active')) {
$('.who').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.what').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHY IS OPEN, CLOSE IT FIRST, THEN OPEN WHAT

else if($('.why').hasClass('active')) {
$('.why').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.what').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHAT IS OPEN, CLICK TO CLOSE IT

else if($('.what').hasClass('active')) {
$('.what').animate({
  top: '+=200'
}, 1000).removeClass('active');
}

// IF NOTHING IS OPEN, CLICK TO OPEN WHAT

else
$('.what').animate({
  top: '-=200'
}, 1000).addClass('active');


});

// OPEN AND CLOSE WHY //    

$('.why').click(function() {

// IF WHO IS OPEN, CLOSE FIRST, THEN OPEN WHY

if($('.who').hasClass('active')) {
$('.who').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.why').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHAT IS OPEN, CLOSE IT FIRST, THEN OPEN WHY

else if($('.what').hasClass('active')) {
$('.what').animate({
  top: '+=200'
}, 1000).removeClass('active');
$('.why').animate({
  top: '-=200'
}, 1000).addClass('active');    
}

// IF WHY IS OPEN, CLICK TO CLOSE IT

else if($('.why').hasClass('active')) {
$('.why').animate({
  top: '+=200'
}, 1000).removeClass('active');
}

// IF NOTHING IS OPEN, CLICK TO OPEN WHY

else
$('.why').animate({
  top: '-=200'
}, 1000).addClass('active');
});
});

来源：https://stackoverflow.com/questions/16297861/jquery-animate-one-div-to-move-down-when-another-one-animates-up

标签

jquery

jquery-animate