CODEWITHSUNDEEP
javascriptjqueryanimationhideopacity
Kostsei Kuolematon
Kostsei Kuolematon

Reputation: 3

Hide and then disable div with javascript

I want to hide the div changing its opacity to 0 with animation and when it is done to disable it changing display property to 'none'. Both functions should be started by onclick or at least one single action, so the div became invisible (like fade out) and then disappear.

I'm using this code to perform animation:

function animateStyle(divID) {
    $("#" + divID).css({ "opacity": "1" }).animate({ "opacity": "0" }, 900);
};

<span onclick="return animateStyle('alert-background');" 
class="close">&#10008;</span>

I tried to use .hide to disable div, but can't make both work together — if the animation works, then div doesn't disappear but only stays invisible. And if the div disappears, then animation doesn't work. May be there's a better solution for this idea?

Update: I have found the way to do what I wanted, but it's more a trick then solution:

function animateStyle(divID) {
    $("#" + divID).css({ "opacity": "1" })
                  .animate({ "opacity": "0" }, 900)
                  .delay(1100)
                  .css({ "margin-top": "0" })
                  .animate({ "margin-top": "-100000px" }, 1);
};

But although this works right, I'd like to completely remove the div instead of moving it outside the screen. Hope there's a way to do it...

Upvotes: 0

Views: 423

Answers (1)

bfavaretto
bfavaretto

Reputation: 71939

You can use fadeOut:

$("#" + divID).fadeOut(900);

It's supposed to be a shorthand to the following, which is closer to what you already have:

$("#" + divID).css({ "opacity": "1" }).animate({ "opacity": "0" }, {
    duration: 900,
    complete: function() { $(this).hide(); }
});

Upvotes: 1

Related Questions