JQuery: Fadeout After Adding Class?

Question

I'm trying to fade out an image after adding a class to it, but for some reason it seems to avoid the transition and disappears without the transition.

The class I'm attempting to add is just a class that tilts it 90 degrees.

Here's my jsfiddle to see it in action:http://jsfiddle.net/sqHxq/4/

Here's my code:

HTML

<div id="logo" style="z-index:10">
<img src="http://s17.postimg.org/lb2un1g0r/image.png" alt ="">
</div>
<div id="other" style="z-index:0">
<img src="http://cdn1.iconfinder.com/data/icons/humano2/32x32/actions/old-edit-redo.png" alt="">
</div>

CSS

.tilt {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

#logo {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
}

#other {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
}

Javascript

$(document).ready(function () {
$('#logo').hide().delay(250).fadeIn(1000);
$('#other').hide().delay(750).fadeIn(1000);

$("#logo").click(function() {
        $('#logo').addClass("tilt").fadeOut(2000);
});
});

Adam · Accepted Answer · 2013-06-26 16:43:23Z

3

Looks like the fade needs to happen on the image and not the div. Right now your div is fading and then sets to display:none; so you need to fade the image.

$(document).ready(function () {
    $('#logo').hide().delay(250).fadeIn(1000);
    $('#other').hide().delay(750).fadeIn(1000);

    $("#logo").click(function() {
            $('#logo').addClass("tilt");
            $('#logo').find('img').fadeOut(2000);
    });
});

answered Jun 26, 2013 at 16:43

Adam

8024 silver badges11 bronze badges

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

1 Comment

KingPolygon Over a year ago

Exactly what I was looking for. Thank you for explaining why it wasn't working and how to fix it. appreciate the help!

Tim Wasson · Accepted Answer · 2013-06-26 16:47:28Z

2

I took a different approach, and added opacity to the CSS transition. You can see it here: http://jsfiddle.net/sqHxq/10/ I did have to add important to get it to register, which I know isn't exactly proper. I think with some tweaking you could do it better than I did.

answered Jun 26, 2013 at 16:47

Tim Wasson

3,69619 silver badges16 bronze badges

Collectives™ on Stack Overflow

JQuery: Fadeout After Adding Class?

HTML

CSS

Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

CSS

Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related