[Jquery] flop effect flip and jqueryflip Based on jquery

[Jquery] flop effect flip and jqueryflip Based on jquery

Recently I made an effect similar to the Tarot flop and shared it with you.

<! Doctype html> 
Parameter description:
Direction: indicates the flip direction. There are 4 values (tb, bt, lr, and rl) in total. The default value is tb.
Content: sets the content displayed in the container after the flip, which can be text, html, or even jquery objects.
Color: Set the background color of the container after the flip
Speed: Set the flip speed. The smaller the value, the faster the speed.
OnBefore: Set the content to be executed before turning
OnAnimation: Set the content to be executed when flipped to half
OnEnd: Set the content to be executed after the flip is complete.
PS:
Jqueryui js only needs core and effects core
Official website address: Flip! A jQuery plugin v0.9.9
Click to download demo

Jquery Rotation effects
JQuery is a js class library with good browser compatibility. It can be used to operate html-DOM and css styles.

Css styles of html elements are defined only in CSS3. In mainstream browsers, the latest version of Chrome supports the best, while safari does. firefox supports less, but it is still feasible, the presentation mode of operabrowser has some personality, which is not supported by IE9 or earlier. I have never used IE10, but I don't know.

JQuery will not include any results that have serious compatibility issues.

If you use IE's VML technology or HTML5's SVG-Canvas technology, you can implement it in disguise.

How to Use JQuery to do this?
For Layer 1:
Onmouseover = display function
Onmouseout = hide a function
(You can set a latency of 500 ms for the hidden function so that it will not be hidden immediately)
Timeout = setTimeout (function () {/* set the hidden code here */}, 500 );
When the mouse leaves Layer 1 but does not enter Layer 2, Layer 2 disappears after Ms

For Layer 2
Onmouseover = display function
{
After entering the display function, the timeout will be cleared immediately; in this way, within ms after the first layer is left
Hidden functions are not executed immediately and are canceled before they are executed.
ClearTimeout (timeout );
}
Onmouseout = hide a function
(You can also set a latency of 500 ms for the hidden function so that it will not be hidden immediately)
Timeout = setTimeout (function () {/* set the hidden code here */}, 500 );

Only provide ideas. You can write your own code ......

<Div id = "myaccount"> my menu </div>
<Div id = "myaccount-menu"> sub-menu </div>
<Script>
Var MyTimeout;
$ (Document). ready (function (){
Test ();
});
Function Test (){

$ ("# Myaccount" ).css ({
Background: "# FCC ",
Width: 120,
LineHeight: "36px"
});
// You can hide it first
$ ("# Myaccount-menu" ).css ({
Background: "# CFC ",
Height: 0,
Width: 120,
LineHeight: "36px ",
Overflow: "hidden"
});
// When the mouse goes through myaccount
$ ("# Myaccount"). bind ('mousemove ', function (){
Try {clearTimeout (MyTimeout );}
Catch (e ){}
$ ("# Myaccount-menu"). animate ({height: 36}, 100 );
});
$ ("# Myaccount"). bind ('mouseout', function (){
// Set the delay. If the mouse does not enter myaccount or myaccount-menu after ms, the operation will be hidden.
MyTimeout = setTimeout (function (){
$ ("# Myaccount-menu"). animate ({height: 0}, 100 );
},200 );
});
// When the mouse goes through myaccount-menu
$ ("# Myaccount-menu"). bind ('mousemove ', function (){
Try {clearTimeout (MyTimeout );}
Cat... the remaining full text>