Question

我想在单击跨度时旋转图像。

所以jquery需要在点击时调用css效果......但没有任何事情发生。怎么了？

HTML

<span class='l'>
    <img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'>
    rotate image on click
</span>

CSS

.l img {
    width: 30px;
    height: 30px;
}

.li img {
    animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

JS

$(function () {
    $(document).on("click", ".l", function () {

        $('.l img').toggleClass(".li img");

    });
});

Answer 1

你的css定义和toggleClass的使用有轻微错误。

这是JS代码。

$('.l img').toggleClass("spin");

CSS

.l img{
  width:30px;
  height:30px;
}
.l img.spin{
  animation:spin 4s linear infinite;
}

see it in fiddle

Answer 2

在点击功能

中将代码更改为此代码

$(this).toggleClass("li");

根据您编写的CSS规则，如果图像的包装范围具有类li

，则图像将会旋转

同时使用$(this)确保您只旋转点击的图片而不是所有图片。

<强> Working Fiddle

Answer 3

需要在您的代码中进行小改动，你已经编写了css as .li img {...}这里你需要删除img和jquery以及toggleClass

$( document ).on( "click", "img", function() {
$('.l img').toggleClass("li");

});

.l img{
  width:30px;
  height:30px;
}
.li{
  animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<span class='l'><img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'>rotate image on click</span>

点击时旋转图像

3 个答案: