CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Adam
Adam

Reputation: 1

JQuery skipping .hide() on call

So I have 3 divs which animate open and close when clicked on. I want it to simultaneously open the clicked on div while keeping the other two closed. If another one is clicked, it will open that one while closing the others to their original size.

Right now I have the functionality mostly working. They open and close properly and the images, when they are 100 by 100, disappear when clicked on, which is good. However, sometimes the images DON'T get hidden and look pretty gross. I can't seem to figure out why this would happen. It's like it skips over the hide() and goes straight to the animate. No firebug errors are thrown so I'm a little stumped. Help? Here's the code snippet. Also, a link to what it looks like when it messes up.

Link:https://i.sstatic.net/6AD9u.png

code: (it's a rough draft so be nice :). This is my first time coding something for fun and out of a work environment so any tips help also!)

Ninja edit: I've both tried having a delay() and not having a delay() to extremes and doesn't seem to help at all. :(

        function openDiv(divPosition) {
            if(divPosition == "top") {
                $("#home, #midDivContent, #botDivContent").hide().delay(1000);
                $("#topDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#midDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#botDiv").animate({"height": "100px", "width": "100px"}, "slow", function() {$("#contactMe, #aboutMe").show();$("#topDivContent").fadeIn("fast");});
            } else if (divPosition == "mid") {
                $("#aboutMe, #topDivContent, #botDivContent").hide().delay(1000);
                $("#midDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#topDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#botDiv").animate({"height": "100px", "width": "100px"}, "slow",function() { $("#home, #contactMe").show();$("#midDivContent").fadeIn("fast");});
            } else if (divPosition == "bot") {
                $("#contactMe, #topDivContent, #midDivContent").hide().delay(1000);
                $("#botDiv").animate({"height": "500px", "width": "950px"}, "slow");
                $("#topDiv").animate({"height": "100px", "width": "100px"}, "slow");
                $("#midDiv").animate({"height": "100px", "width": "100px"}, "slow",function() { $("#home,#aboutMe").show();$("#botDivContent").fadeIn("fast");});
            }
        }

Upvotes: 0

Views: 100

Answers (1)

couzzi
couzzi

Reputation: 6366

In order to delay the animation, you need to delay it on that specific element.

Your code $("#home, #midDivContent, #botDivContent").hide().delay(1000) has nothing to delay, as it has already hidden the elements in your selectors.

Alternatively, if you did $("#home, #midDivContent, #botDivContent").delay(1000).hide(); it would affectively wait 1 second before hiding those three divs. What you want is to delay the animation on the next set of elements, so do this:

$("#topDiv").delay(1000).animate({"height": "500px", "width": "950px"}, "slow");

And so on and so forth, for each animate you wish to delay.

Also worth noting, you could use callbacks. The animations you wish to execute after another element has finished animating can be placed in the callback of the initial elements animation function. 

$("#home, #midDivContent, #botDivContent").delay(1000).hide(function(){
    $("#topDiv").animate({"height": "500px", "width": "950px"}, "slow");
});

Here especially, I'd suggest $("#topDiv").delay(1000)... OR specifying a timing for hide: .hide(500, function()... as passing hide() with no int makes it instantaneous.

Upvotes: 1

Related Questions