[Djsquid]

Hey guys,

I'm sure this is quite a simple thing to do, but I can't work it out for the life of me...

I have 2 divs; #uniwork & #personalwork which are in the exact same places. I also have 2 buttons #university & #personal, and when I click on the relevant button the div is animated to slide down.

The Problem I am having is when I press the #university button the #uniwork div slides down perfectly, the same applies with pressing #personal and the #personalwork div, but what I need is for the opposite one to reverse the animation and go back up before the actual div for that button comes down.

Example; Press #university, #uniwork slides down, Press #personal, #uniwork slides back up, #personalwork slides down. Press #university again, #personalwork slides up, #uniwork slides down...etc

The code which I have is working perfectly for the divs to slide down and back up for that pacific button and div, but I can't figure out how to get the opposing div to go back up. I'm not sure whether an 'If' 'else' statement would be more appropriate, but as I'm a beginner this is proving very difficult. I did try the .slide but the effect wasn't right, I prefer the actual div moving rather than the revealing effect.

The Jquery which is working to a degree;

 $("#university").toggle(function(){
    $("#uniwork,").animate({top:"0"},{duration:300});
}, function() {
    $("#uniwork").animate({top:"-330px"},{duration:300});
});

 $("#personal").toggle(function(){
    $("#personalwork").animate({top:"0"},{duration:300});
}, function() {
    $("#personalwork").animate({top:"-330px"},{duration:300});
});

I have also made a mockup on JSfiddle, but on my actual website design the two are sitting onto of each other;
Mockup

Thank you in advance

[Atli]

Hey.

What you need to do is, before you slide one of them down, make sure the other one is already up. If it isn't, move that one up first before moving the other one down. - This could be done using a IF statement, to check the "top" value of the element that should be up.

First of all, I would create function to toggle one of the elements to be up or down. For example:

var slideElem = function(elem, callback) {
	if(elem.css("top") != "0px") {
		elem.animate({top : "0px"}, 300, callback);
	} 
	else {
		elem.animate({top : "-55px"}, 300, callback);
	}
}

Calling this in your buttons "click" event would move a selected element up or down, depending on it's current position.

Now you need to figure out whether to move the other element up before this happens. For that I would create another function, one that uses the first one to move the elements:

var swapElems = function(inElem, outElem) {
	if(outElem.css("top") == "0px") {
		slideElem(outElem, function() {
			slideElem(inElem);
		})
	} 
	else {
		slideElem(inElem);
	}
}

That checks the "outElem" to see if it's already down, and if it is, moves it up before moving the "inElem" down.

Using callback functions like that allows you to chain animations; to wait until the first animation is over before moving on to another.

[Djsquid]

Hey Atli, thank you for taking a look at this for me, I did forget to mention that the 2 divs #uniwork & #personalwork are set to top:-330px, and the containing div is set to overflow:hidden, so that the 2 divs are positioned in exactly the same place out of view at the top. So its a case of sliding them down to 0px.

The code you have provided me as kind of gone over my head really, I'm an beginner at Jquery and didn't expect this to be so challenging.

[e_i_pi]

What Atli says is correct, and using defined scope-accessible callback functions is the right way to go, but in the interests of not confusing you too much, here is working code that uses calls to anonymous functions:

$(".click").off('click').on('click', function() {
    var newTop = ($(".address").css("top") == "-55px" ? "0px" : "-55px");
    $(".address").animate({
        top: newTop
    }, 200, function() {
        $(".address1").animate({
            top: "-55px"
        }, 200);
    });
});

$(".click1").off('click').on('click', function() {
    var newTop = ($(".address1").css("top") == "-55px" ? "0px" : "-55px");
    $(".address1").animate({
        top: newTop
    }, 200, function() {
        $(".address").animate({
            top: "-55px"
        }, 200);
    });
});

I think I may have accidently updated your JSFiddle to that code, sorry about that But it works now anyhow.

EDIT: Actually I've borked it a little bit, working on the fix now

EDIT2: The code here and on JSFiddle is now fixed and up to date

This post has been edited by e_i_pi: 22 January 2012 - 10:01 PM