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 回答