Hide and then disable div with javascript

Question

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...

$(function() { $('.close').on('click', function() { animateStyle($(this).data('id')); }); }); Add a data-attribute to animate the ID of your choosing. — Jiskiras
– Jiskiras, Commented Feb 26, 2013 at 1:41
But how should this disable the div? The point of my question is that I need both smooth animation while div becomes invisible (transparent) and then I need to disable this invisible div the same way as if its display property was 'none'. — Kostsei Kuolematon
– Kostsei Kuolematon, Commented Feb 26, 2013 at 2:25

bfavaretto · Accepted Answer · 2013-02-26 02:25:27Z

1

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

edited Feb 26, 2013 at 2:25

answered Feb 26, 2013 at 1:22

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Kostsei Kuolematon Over a year ago

.fadeOut doesn't make a smooth animation effect (for me at least).

bfavaretto Over a year ago

That's weird. In theory, it should do exactly what you described. Added an alternative to my answer, try that and see if it performs smoother.

Kostsei Kuolematon Over a year ago

It seems strange to me also, but this doesn't give animation effect at least in Firefox and Chrome on mac.

Kostsei Kuolematon Over a year ago

And it looks like duration time here is actually delay time. Because when I increase it, it only makes a delay before the div disappears with no animation.

bfavaretto Over a year ago

@KostseiKuolematon I may have found it: check your CSS or inline styles for !important rules on opacity. Example: jsfiddle.net/rGfGG

|

Collectives™ on Stack Overflow

Hide and then disable div with javascript

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related