Question

我正在进行下拉导航，我想使用旋转的箭头来切换它。

$(document).ready(function() {
$( ".toggle" ).click( function() {
    $("#image").css({'transform': 'rotate(-180deg)'});
});
});

我只是不确定如何重置它，就像完成旋转一样，当它在第二次及以后的时间点击时再次指向。

可能是带有

的.flip课程

.flip { transform: rotate(-180deg);}

并使用if()和addClass()/removeCLass()？

谢谢！

Answer 1

您可以使用toggleClass

$(document).ready(function() {
    $( ".toggle" ).click( function() {
        $("#image").toggleClass('flip');
    });
});

#image {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

Answer 2

可能会改变

$("#image").css({'transform': 'rotate(-180deg)'});

到

$("#image").toggleClass('flip');

Answer 3

你已经得到了关于toggleClass的另一个答案，但没有一个解释你遇到的问题。

点击后，您已成功将元素的transform设置为-180deg，但问题是在第二次点击时您没有添加另一个{{ 1}}到那个元素。您只需将-180deg的值（再次）设置为-180deg属性（实际上什么都不做，因为您已经在该元素上拥有transform。）

您可以使用其中一个-180deg示例（效果很好）来解决此问题，您还可以检查toggleClass的当前值是否为transform，如果是案例 - 设置none，否则 - 重置它：

-180deg

$(document).ready(function() {
  $( ".toggle" ).click( function() {
    console.log($("#image").css('transform'));
    if ($("#image").css('transform') == 'none') {
      $("#image").css({'transform': 'rotate(-180deg)'});
    } else {
      $("#image").css({'transform': ''});
    };
  });
});

#image {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.flip {
  transform: rotate(-180deg);
}

Answer 4

在工作代码下找到：

<!-- Image rotating by default -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotating by default</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation">
</div>
<!-- End Image rotating by default -->

<!-- Image rotation manually -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotation manually</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation2">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation2">
<div><button id="start">Start Rotation</button> <button id="stop">Stop Rotation</button></div>
</div>
<!-- End Image rotation manually -->

<script src="jquery.min.js"></script>
<script src="jQueryRotate.js"></script>
<script>

$(function() {

// Image rotating by default
var angle = 0;
setInterval(function(){
angle+=2;
$(".auto-rotation").rotate(angle);
},10);


// Image rotation manually
var ang = 0;
$("#start").click(function() {

window.st = setInterval(function(){
   ang+=4;
   $(".auto-rotation2").rotate(ang);
   },10);
});

$("#stop").click(function() {
clearInterval(window.st);
});
// End Example-3

});

</script>

有关详细的工作演示代码click here

Answer 5

只需使用这种简单的方法！

$(document).ready(function() {
  $( ".toggle" ).click( function() {
    console.log($("#img").css('transform'));
    if ($("#img").css('transform') == 'none') {
      $("#img").css({'transform': 'rotate(-180deg)'});
    } else {
      $("#img").css({'transform': ''});
    };
  });
});

#img {
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

.flippingImage {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img class="toggle" id="img" src="https://i.imgur.com/uLlPUfM.png"/>

使用带动画的jquery单击旋转图像180度

5 个答案: