How to add css Class when it hasClass in jQuery

Question

First please see this: jsfiddle Demo

CSS:

.spin {
    background-color: orange;
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    /* Fade */

    opacity: 1.0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

 @-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

#nav {
    width: 100%;
    height: 150px;
    background-color: #760d11;
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1;
}


#logo {
    width: 54px;
    height: 54px;
    background-color: white;
    position: relative;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
    top: -55px;
    border-radius: 50% 50% 50% 50%;
        opacity: 0.6;
}

Javascript:

$(document).ready(function () {
    var logo$ = $('#logo');
    var nav$ = $('#nav');
    logo$.css('cursor', 'pointer');
    logo$.click(function () {
        nav$.stop().animate({ top: '10px' }, 600);
        nav$.addClass('isopen');
    });

    nav$.mouseleave(function () {
        $(this).stop().animate({ top: '-100px' }, 600);
    });
    
    setTimeout(function() {
        if ($(nav$).hasClass('isopen')) {
            nav$.animate({ top: '-100px' }, 600);
        }
    }, 30000);
    
    if ($(nav$).hasClass('isopen')) {
        logo$.addClass('.spin');
    }
});

HTML:

    <div id="topbar"></div>
    <div id="logo">LOGO</div>
    <div id="nav">

    </div>

I'm trying to make the logo spin clockwise until the cursor moves outside the nav (the initial bar, and the red part that slides out).

I believe this should work, but it doesn't.

if ($(nav$).hasClass('isopen')) {
    logo$.addClass('.spin');
}

How do I get the logo to spin?

`logo began to spinning`.. what do you mean?? logo should have a spin effect ?? — bipen, Aug 03 '13 at 19:13
@pedramalipour You telling it to check if nav has class `isopen` only on document ready, not actively while the page is open. See [Fire event if CSS class changed](http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed) for how to monitor class change — Luke Shaheen, Aug 03 '13 at 19:22

score 1 · Accepted Answer · answered Aug 03 '13 at 19:22

1

Ok so you were almost there. I got it working : fiddle

So I renamed your #span css to .logo2 (which is what I thought you wanted based on the code you provided). Then I simply add the class to your logo on the click, and remove it on the mouse out.

logo$.click(function () {
        nav$.stop().animate({ top: '10px' }, 600);
        nav$.addClass('isopen');
        logo$.addClass("logo2");
    });

nav$.mouseleave(function () {
    $(this).stop().animate({ top: '-100px' }, 600);
    logo$.removeClass("logo2");
});

Let me know if this was what you were trying to achieve!

answered Aug 03 '13 at 19:22

Phil-R

2,193
18
21

BIG Thanks man! exactly what i want. but why fade in effect doesn't work now? – Aug 03 '13 at 19:32
The css specified for an Id (#logo) is more specific than the css specified for a class (.logo2), so the 0.6 opacity is applied over the 1.0 opacity. In the .logo2 css, write opacity: 1.0 !important; to apply it over the other. – Phil-R Aug 03 '13 at 19:38

How to add css Class when it hasClass in jQuery

1 Answers1