jQuery为一个Div设置动画以在另一个动画时向上移动 [英] jQuery animate one Div to move down when another one animates up

问题描述

我的页面上分别有3个div，分别是A，B和C.当我单击AI时，它希望它向上移动200像素并添加活动"类，而当我再次单击它时，它又向下移动并删除活动的类.我设法做到了，但是，现在我需要使它处于活动状态，因此只有一个div处于活动状态，因此如果一个div处于活动状态(或活动")，然后单击另一个div，则活动" div会先向下移动，然后再向下移动另一个div向上移动.

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.

例如，如果A处于活动状态并且我单击B，则A必须先向下移动，然后B向上移动.

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

这是我移动div的代码(您将看到还有一个"close_A"元素，它只是一个也关闭div的十字):

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.

推荐答案

我认为已经找到了答案...尽管必须有更短的方法(通过将A，B和C更改为Who的方式) ，分别是什么和为什么):

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');
});
});

这篇关于jQuery为一个Div设置动画以在另一个动画时向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！