[英]jQuery toggleClass to rotate 180° doesn't work
I'm trying to make an image ( img tag ) rotate 180° when it's clicked.我试图让图像( img 标签)在点击时旋转 180°。
$(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>
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.
然后我删除了函数中的参数“ e ”,以防万一奇迹会使它起作用,但它没有。
The image I need to rotate is the first, called "chevron-occasion", why doesn't it work ?我需要旋转的图像是第一个,称为“人字形场合”,为什么它不起作用?
Thanks !谢谢 !
If I understood your problem correctly.如果我正确理解你的问题。 Here is the solution http://jsfiddle.net/xpvt214o/924105/
这是解决方案http://jsfiddle.net/xpvt214o/924105/
try this css试试这个 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)
}
}
Also in your above code the argument 'e' does not have any functionality.同样在上面的代码中,参数“e”没有任何功能。 So, removing the argument won't have any effect.
因此,删除参数不会产生任何影响。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.