jQuery toggleClass旋转180°不起作用 [英] jQuery toggleClass to rotate 180° doesn't work
问题描述
我正在尝试使图像(img标签)单击时旋转180°.
I'm trying to make an image ( img tag ) rotate 180° when it's clicked.
$(document).off('click', '.taxonomie').on('click', '.taxonomie', function (e) {
$(".chevron-occasion").toggleClass("flip");
});
.mon-plateau-de-fromages .form-plateau-fromage .chevron-occasion {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.flip {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 b-gold taxonomie occasion">
<p class="number-left">1</p>
<div>
<p class="titre-taxonomie">Par occasion</p>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/chevron.png" alt="chevron occasion" class="chevron-occasion">
</div>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/calendar.png" alt="calendar occasion" class="img-occasion">
</div>
因此,首先添加了翻转"类,并在单击时将其删除.然后,我删除了函数中的参数"e",以防万一有奇迹可以奏效,但事实并非如此.
So at first the "flip" class was added and removed on click. Then I removed the argument " e " in the function, just in case a miracle would make it work, but it didn't.
我需要旋转的图像是第一个,称为雪佛龙场合",为什么不起作用?
The image I need to rotate is the first, called "chevron-occasion", why doesn't it work ?
谢谢!
推荐答案
如果我正确理解了您的问题.这是解决方案 http://jsfiddle.net/xpvt214o/924105/
If I understood your problem correctly. Here is the solution http://jsfiddle.net/xpvt214o/924105/
尝试此CSS
.flip {
animation: animate 4s ease-in-out;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
@keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(180deg)
}
}
在您上面的代码中,参数'e'也没有任何功能.因此,删除参数不会有任何效果.
Also in your above code the argument 'e' does not have any functionality. So, removing the argument won't have any effect.
这篇关于jQuery toggleClass旋转180°不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!