CODEWITHSUNDEEP
jquery
user2262049
user2262049

Reputation:

How to add css Class when it hasClass in jQuery

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?

Upvotes: 3

Views: 163

Answers (1)

Phil-R
Phil-R

Reputation: 2253

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!

Upvotes: 1

Related Questions