how to add class with animation?

Question

I want to make image dissappear by adding a class

But if I woud do this my element would dissapear without animation

I want it to dissappear slowly

I know that there are some css3 properties but I don't know which

I know how to do it with animation of opacity but I don't want

HTML

<img scr="..." class="a">
<button onclick="make_img_dissappear()">Click to dissappear</button>

CSS

.hide{
display: none;
}
.a{
/*these properties must provide adding class with animation*/
}

JAVASCRIPT

function make_img_dissappear(){
$("img").addClass("hide");
}

http://stackoverflow.com/questions/23414413/jqeury-onclick-addclass-removeclass-and-add-fade/23414542#23414542 — Brett Weber, May 01 '14 at 20:04

score 3 · Accepted Answer · answered May 01 '14 at 20:06

3

Instead of the javascript solutions, you could just use CSS transitions if you're willing to use (for example) opacity instead of display.

.hide {
  opacity: 0;
}
.a {
  transition: opacity 1s linear; /* vendor prefixes, etc */
}

answered May 01 '14 at 20:06

second best answer to this question – Brett Weber May 01 '14 at 20:07
The reason i saw second best is because CSS animations are not always supported, so from my perspective they should only be used to add to a layout, not provide functionality for an action of any kind. But, there again, just personal opinion – Brett Weber May 01 '14 at 20:10
Brett, I agree with you; I guess I just don't consider fading animations to be functionality =) – May 01 '14 at 20:13
lol, me either, but the action that determines the fading might be. :) again, a perspective distinction. From my view, the resulting action of an action is still functionality, whereas the resulting action being simply an applied style is another perspective – Brett Weber May 01 '14 at 20:16
But it's still the best answer that can actually answer his question! The other answers don't. So this should be the best answer. – Bluedayz May 02 '14 at 08:06

score 1 · Answer 2 · answered May 01 '14 at 20:02

You will have to do something like this

function make_img_dissappear(){
    $("img").addClass("hide");
    $( "img" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
}

OR

   function make_img_dissappear(){
        $("img").fadeOut("fast");
    }

For more information checkout the Animate documentations and fade documentations are here

Neil · Answer 3 · 2014-05-01T20:12:47.857

1

Try .fadeOut -

function make_img_dissappear(){
$("img").fadeOut("slow");
}

Documentation of .fadeOut is HERE

Through CSS-

.hide {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

edited May 01 '14 at 20:12

answered May 01 '14 at 20:02

Neil

402
6
18

I want throught css I know it throught jquery – May 01 '14 at 20:04

score 1 · Answer 4 · edited May 23 '17 at 10:26

It is not possible to add a class "slowly". It is there if you want to have it and can be removed if you want that. Just like a question with the answers true or false.

Since you use jQuery, I recommend you to use that:

$("img").fadeOut(); //400 milliseconds by default

You can even say how long this animation should be:

$("img").fadeOut(200); //200 milliseconds

If you want to fade your object to a special opacity, use:

$("img").fadeTo(200, 0.2) //animation of 200 milliseconds to an opacity of 0.2

By the way, in jQuery you can use "slow" or "fast" instead of the duration in milliseconds, slow is 600 milliseconds and fast is 200 milliseconds. Default is 400 milliseconds.

Here to learn more:

https://api.jquery.com/fadeTo/

https://api.jquery.com/fadeOut/

I am not quite sure if it works but since you really want to use css3:

Look here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

And at this post: CSS3 transition fadein with display:none

maybe this helps you out? https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions — Bluedayz, May 01 '14 at 20:09

how to add class with animation?

4 Answers4