3

まずこれを見てください：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>

カーソルがナビゲーションの外に移動するまで、ロゴを時計回りに回転させようとしています (最初のバーとスライドする赤い部分)。

私はこれがうまくいくはずだと信じていますが、そうではありません。

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

ロゴを回転させるにはどうすればよいですか?

4

1 に答える 1

1

わかりましたので、あなたはほとんどそこにいました。私はそれを働かせました：フィドル

そこで、#span css の名前を .logo2 に変更しました (これは、提供されたコードに基づいてあなたが望んでいたものだと思います)。次に、クリックしてクラスをロゴに追加し、マウスアウトで削除します。

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");
});

これがあなたが達成しようとしていたものであるかどうか教えてください!

于 2013-08-03T19:22:48.390 に答える