3

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?

Improve this question
4
  • logo began to spinning.. what do you mean?? logo should have a spin effect ?? Commented Aug 3, 2013 at 19:13
  • yes, it already have , please check #spin in css @bipen Commented Aug 3, 2013 at 19:15
  • No need to do $(nav$), nav$ itself is enough. Commented Aug 3, 2013 at 19:15
  • @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 for how to monitor class change Commented Aug 3, 2013 at 19:22

1 Answer 1

Reset to default
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!

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

2 Comments

BIG Thanks man! exactly what i want. but why fade in effect doesn't work now?
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.