2

我有两个div。一个应用旋转效果，另一个通过点击触发。

$(function() {
  $("a").click(function() {
    $("#d1").addClass(".spinEffect");
  });
});
#d1,
#d2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px 50px 50px 50px;
}

#d2 {
  background-color: green;
  -webkit-animation: spin 10s infinite linear;
}

.spinEffect {
  -webkit-animation: spin 0.5s 1 linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
</div>
<div id="d2">
</div>
<a href=#>click me</a>

这是演示页面。我知道问题应该在js中，有人可以告诉我如何修改它吗？

当我删除它时它正在工作.

但是当我点击链接时，它只能工作一次。我该如何解决？

4

3 回答 3

4

你的附近有一个错误addClass，你应该放$("#d1").addClass("spinEffect");而不是“.spinEffect”，.那里没用;）

对于您的第二个问题，只需添加infinite您的 CSS

.spinEffect{
  -webkit-animation: spin 0.5s infinite linear;
}

编辑

如果你想让框每次点击按钮都转动一次，可以通过以下方法实现

$(function(){
  $("a").click(function(){
    var $d1 = $("#d1"); //little optimization because we will use it more than once
    $d1.removeClass("spinEffect");
    setTimeout(function(){$d1.addClass("spinEffect")},0);
  });
});

您可能会问为什么setTimeout，这是因为否则会重新添加该类以快速使 CSS 触发效果；）

于 2013-06-21T11:52:58.677 回答
2

您实际上可以完全在 CSS 中执行此操作并完全避开 javascript（假设目标浏览器支持:target伪类）

:target选择具有由 url 的哈希部分指定的 ID 的任何元素，例如：http://localhost/#d1将是单击此答案中的链接后的 URL。

注意我意识到这意味着动画只会发生一次。因此，如果这是针对可以多次单击链接的情况，请务必使用 JS 解决方案（尽管我认为您必须删除该类并再次添加它以重新触发动画）

HTML：

<div id="d1">

</div>

<div id="d2">

</div>

<a href="#d1">click me</a>

CSS：

#d1, #d2{
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px 50px 50px 50px;
    }

    #d2{
        background-color: green;
        -webkit-animation: spin 10s infinite linear;
    }

    /* or #d1:target */
    :target{
        -webkit-animation: spin 0.5s 1 linear;
    }

    @-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
    }
于 2013-06-21T12:14:06.460 回答
2

您所要做的就是删除“。” 来自js中的类名

JS：

$(function(){
    $("a").click(function(){
        $("#d1").addClass("spinEffect");
    });
});
于 2013-06-21T11:53:39.373 回答