jquery - 点击旋转图片

单击范围时，我想旋转图像。

因此，jQuery需要在单击时调用CSS效果...，但是什么也没有发生。怎么了？

https://jsfiddle.net/cc4tg1b7/1/

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

    });
});

最佳答案

您在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

关于jquery - 点击旋转图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36043622/