How to realize the click-and-flip effect in jquery

This article editor for you detailed introduction of "jquery how to achieve click flip effect", the content is detailed, the steps are clear, the details are handled properly, I hope that this "jquery how to achieve click flip effect" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Implementation method: 1, use the "element object .click (function () {})" statement to bind the click event to the specified element, and set the event handler function; 2, in the handling function, set the "element object .css (" transform "," rotateY (180deg) ")" statement to achieve the flip effect.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The method of realizing click-and-flip effect in jquery

1. Set click events

Use click () to bind click events to elements and set event handlers

.block {width: 200px; height: 200px; background: brown; cursor: pointer; transition: 0.8s } $(document) .ready (function () {$("button") .click (function () {/ / after the click event occurs Code executed}) })

Flip element

2. In the event handler function, use css () to add a flip style to the specified element

The css () method returns or sets one or more style properties of the matching element.

Flip style is "transform: rotateY (180deg)"

$(document) .ready (function () {$("button") .click (function () {$("div"). Css ("transform", "rotateY (180deg)");})

Read here, this "jquery how to achieve click flip effect" article has been introduced, want to master the knowledge of this article still need everyone to practice and use to understand, if you want to know more related articles, welcome to follow the industry information channel.