jquery animation mouse click rotation

With the continuous development of Internet technology, page interaction effects have become an aspect that designers must pay attention to. Among them, animation effects are an integral part of page interaction. In this regard, jQuery animation is one of the most commonly used techniques. In this article, we will use a case to describe how to use jQuery animation to achieve a mouse click rotation effect.

First of all, we need to clarify a concept, that is, jQuery is a JavaScript library that can help us complete page interaction effects more easily and quickly. Next, we need to prepare some code.

HTML part:

<div class="box"></div>

CSS part:

.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

In order to make the code more readable, we can style the box class in CSS. Among them, the transform attribute in CSS3 is used, which can center the element horizontally and vertically through the translate function.

Now, we need to use jQuery to achieve the mouse click rotation effect. First, we can introduce the jQuery library into HTML.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Next, in the JS part, we need to get the .box element first.

var box = $('.box');

Then, we can use jQuery's click event to listen for the mouse click event of the box element. When the user clicks on the .box element, we can trigger a rotation animation.

box.click(function() {
  box.animate({
    rotation: "+=360deg"
  }, {
    duration: 1000,
    easing: 'linear',
    step: function(now, fx) {
      $(this).css('transform', 'rotate(' + now + 'deg)');
    }
  });
});

In the above code, we use jQuery's animate function to create a rotation animation. In the animate function, we set the angle to rotate (rotation: " =360deg") and the duration of the animation (duration: 1000). We also use an easing option to set the easing method of the animation, here linear easing is used.

In the animate function, we also set up a step function. This function will be called once every frame. In this function, we can update the CSS properties of the element based on the state of the current frame. In this example, we update the transform attribute of the .box element according to the current rotation angle every frame.

Now, we have completed a basic mouse click rotation effect. We can run this code in a local browser and see how it works.

Summary:

In this article, we use a case to describe how to use jQuery animation to achieve the mouse click rotation effect. In this process, we used jQuery’s animate function and CSS3’s transform attribute. Although this effect is simple, in actual web design, it can bring a better interactive experience to users.

The above is the detailed content of jquery animation mouse click rotation. For more information, please follow other related articles on the PHP Chinese website!