Question

我正在尝试使图像（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>

因此，首先添加了“翻转”类，并在单击时将其删除。然后，我删除了函数中的参数“ e”，以防万一有奇迹可以奏效，但事实并非如此。

我需要旋转的图像是第一个，称为“雪佛龙场合”，为什么不起作用？

谢谢！

Answer 1

如果我正确理解了您的问题。这是解决方案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'也没有任何功能。因此，删除参数不会有任何效果。

jQuery toggleClass旋转180°不起作用

1 个答案: