1

我有一个形成一个圆圈的 CSS 类，我试图通过添加一个 css 属性从 Jquery 动态旋转它。当我第一次单击按钮时它工作正常，其余时间它处于空闲状态。我尝试使用“cssAmination”功能，但它没有用。我无法弄清楚我哪里出错了。请帮助我修复此代码。提前致谢。

/*Circle code*/
div.circle{   
width: 300px;   
height: 300px;    
-moz-border-radius:150px; 
-webkit-border-radius: 150px;  
background:#808080; 
border-radius: 150px;
bottom: -150px;
left: -150px;
position: absolute;
}

/*rotate class*/
div.rotateCircle
{   
/* Firefox: */
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
}

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

//Jquery code:
<script type="text/javascript">
        $(document).ready(function(){
    $("a").click(function(){
        $('div#rotateCircle').css({'-moz-animation-name':'moveCircle'});
    });
}); </script>
<body>
    <h3>Labs Project</h3>
    <div>
        <div id=rotateCircle class="circle">
            &nbsp;
        </div>
        <div id=rotateCircle class="horizontalLine">
            &nbsp;
        </div>
        <div id=rotateCircle class="verticalLine">
            &nbsp;
        </div>
        <div class="divButton">
            <table>
                <tr>
                    <td><a class="btn" href="#">HOME</a></td>
                    <td><a class="btn" href="#">Class</a></td>
                    <td><a class="btn" href="#">CV</a></td>
                    <td><a class="btn" href="#">CM</a></td>
                </tr>
            </table>
        </div>      
    </div>
</body>
4

2 回答 2

0

您应该查看动画的 JavaScript 事件：https ://developer.mozilla.org/en/CSS/CSS_animations#Using_animation_events

基本上，我为动画的名称添加了一个类 

#rotateCircle.rotate {
    -webkit-animation-name: moveCircle;
       -moz-animation-name: moveCircle;
         -o-animation-name: moveCircle;
            animation-name: moveCircle;
}

而不是在 jQuery 中添加 CSS，您只需添加类并在动画完成时将其删除，animationend事件：

$(function() {
    var $rotateCircle = $('div#rotateCircle');
    $("a").click(function(){
        $rotateCircle.addClass('rotate')
        .on('animationend', function() {
            $rotateCircle.removeClass('rotate');
        });
    });
});

（我也让它看起来更好一点）这是新的工作小提琴。

注意：该animationend事件在某些浏览器上具有前缀，这是我为支持所有不同浏览器所做的要点（您需要Modernizr）。

于 2012-06-20T17:46:38.200 回答
0

有一个css3 转换属性可以让这个任务变得非常简单。我在帖子中使用了 webkit，相应地更改了属性。
CSS

#rotateCircle.rotate {
    -webkit-transform: rotate(0);
    -webkit-transition: -webkit-transform 2s; //+ optional path i.e. linear
}

然后使用 js，您只需将 css 属性设置为启用转换，它会神奇地为这些设置设置动画，在本例中为转换。

$(function() {
    var angle = 0;
    $("a").click(function(){
        angle += 90;
        $("div#rotateCircle").css("-webkit-transform", "rotate("+angle+"deg)";
    });
});

这段代码我没有测试过，但是transition属性用起来很简单，而且自从学会了之后，我就很少再使用keyframes/css动画属性了。

于 2012-06-21T14:34:43.783 回答