Events and animations in jquery and jquery event animations

Events and animations in jquery and jquery event animations
I. Events

1. mouse events

 

Eg: Beam Effect

$ (Function () {$ ('lil '). mouseover (function () {// The cursor is out of date when the mouse moves (this).css ('background', 'blue ');}). mouseout (function () {// The cursor (thisground .css ('background ','');});});

2. Keyboard Events

3. Form Events

Eg: text display effect in the input box

// Query the input box $ ("input [name = 'search']"). focus (function () {$ (this ). val ("") ;}); $ ("input [name = 'search']"). blur (function () {$ (this ). val ("Enter the question to query ");});

4. Bind and remove events

Bind (): bind event

01. Bind

$("input[name=event_1]").bind("click",function() {    $("p").css("background-color","#F30");});

02. bind multiple

$("input[name=event_1]").bind({mouseover: function () {    $("ul").css("display", "none");},mouseout: function () {    $("ul").css("display", "block");}});

Unbind ([type], [fn]): Remove event

 

When unbind () does not contain a parameter, it indicates that all events bound to it are removed.

5. composite events

1. hover () method

The hover () method is equivalent to a combination of mouseover and mouseout events. It is used to simulate mouse pointer hover events.

$("#myaccound").hover(function(){        $("#menu_1").css("display","block");     },     function(){        $("#menu_1").css("display","none");     });

2. toggle () method (delete after j 1.7, not recommended)

The toggle () method is used to simulate consecutive mouse click events.

$ ("Body "). toggle (function () {}, // trigger function () {}for the first time, // trigger function () {}// trigger function for the second time... //...);

At the same time, the toggle () method also plays a role in switching the visible state of elements.

$ ('Input '). toggle (function () {$ ('ul '). toggle (); // hide when displayed. Hide when hidden.}, function () {$ ('ul '). toggle (); // hide if it is displayed. Hide if it is hidden });

Ii. Animation

1. Display and hide Elements

Show () can define the effect of an element when it is displayed, such as the display speed.

$ (". Tipsbox"). show ("slow"); // display elements at a slow speed

Hide () hidden element

$ (". Tipsbox"). hide ("slow"); // hide elements at a slower speed

Here we add the use of the is () method to determine whether it is displayed or hidden.

Eg:

$ ('Input '). bind ('click', function () {if ($ (this ). is (': visible') {// if the content is displayed $ (this ). hide ();} else {$ (this ). show ();}})

2. Switch the visible state of the element (toggle ())

Toggle () can not only simulate consecutive Mouse clicking events, but also switch the visible state of elements.

$ ("Li: gt (5): not (: last)"). toggle (); // hide: Show, hide

3. Fade-in and fade-out effect

FadeIn () and fadeOut () can be achieved by changing the transparency of Elements

$ ("Input [name = fadein_btn]"). click (function () {$ ("img "). fadeIn ("slow"); // fade in at a slow speed}); $ ("input [name = fadeout_btn]"). click (function () {$ ("img "). fadeOut (1000); // fade out at a speed of 1000 milliseconds });

4. Change the height of an element

SlideDown () can gradually extend the element display, and slideUp () will gradually shorten the element until it is hidden.

$("h2").click(function(){        $(".txt").slideUp("slow");        $(".txt").slideDown("slow");});

3. Custom Animation

Please recommend Daniel blog: http://blog.csdn.net/huileiforever/article/details/45076469 for details

You will surely gain something!