Shulou(Shulou.com)06/01 Report--

This article "jQuery animation, traversal and event binding how to achieve" most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "jQuery animation, traversal and event binding how to achieve" article bar.

Learning content: 1, jQuery Advanced 1, Animation: three ways to show and hide elements

Default shows and hides elements show ([speed, [easing], [fn]]) hide ([speed, [easing], [fn]]) toggle ([speed, [easing], [fn]])

Scroll to show and hide elements slideDown ([speed, [easing], [fn]]) slideUp ([speed, [easing], [fn]]) slideToggle ([speed, [easing], [fn]])

Fade to show and hide elements fadeIn ([speed, [easing], [fn]]) fadeOut ([speed, [easing], [fn]]) fadeToggle ([speed, [easing], [fn]])

Parameter speed: speed, three predefined values ("slow", "normal", "fast") or millisecond values indicating the duration of the animation (for example: 1000) easing: used to specify the switching effect, default is "swing", available parameter "linear" swing: the effect of animation execution is "slow first, fast in the middle, then slow" linear: the speed of animation execution is uniform fn: a function executed when the animation is completed, and each element is executed once

2. Traversing

Jq traversal mode jq object .each (callback) $.each (object, [callback]) for... Versions available after of jQuery3.0

3. Event binding

The standard binding method of jQuery is jq object.

On bind event / off unbind event jq object .on (event, callback function); jq object .off (event); if you do not pass the event name, unbind all events

Event switch: togglejq object .toggle (fn1,fn2...) ; execute the passed function in turn with multiple clicks

4. Case

Ad display and hiding requirements when the page is loaded, 3 seconds later, the ad is displayed automatically for 5 seconds, the automatic disappearance analysis uses a timer to complete the timer executed by setTimeOut () once, the display and hidden animation effect of jQuery is actually to control the display property to use show/hide related methods to complete the display of the advertisement.

Click on abstract requirements to start, small frame quick switch click to stop, small frame stop switch analysis to start button bind click event definition loop timer toggle small picture frame src attribute definition array, store picture resource path to generate random number, array index to end button bind click event stop timer to set src attribute to large picture frame

5. Plug-ins: enhance jQuery function

Implement $.fn.extend (object); enhance the ability to get objects through jQuery $("# id") $.extend (object); enhance the jQuery object itself $/ jQuery

Learning output: 1. Animation Insert title here / / Hidden div function hideFn () {/ * $("# showDiv"). Hide ("slow", "swing", function () {/ / alert ("hidden.") ;}) * / / default mode / $("# showDiv"). Hide ("slow", "swing"); / / sliding mode / / $("# showDiv"). SlideDown ("slow", "swing"); / / fade in and fade out mode $("# showDiv"). FadeOut ("slow", "swing") } / / display div function showFn () {/ * $("# showDiv") .show ("slow", "linear", function () {/ / alert ("shown.") ;}) * / / default mode / $("# showDiv"). Show ("slow", "swing"); / / sliding mode / / $("# showDiv"). SlideUp ("slow", "swing"); / / fade in and fade out mode $("# showDiv"). FadeIn ("slow", "swing") } / / Toggle Show Hidden div function toggleFn () {/ * $("# showDiv") .toggle ("slow", "swing", function () {/ / alert ("Toggle Show is hidden.") ;}) * / / default mode / $("# showDiv"). Toggle ("slow", "swing"); / / sliding mode / / $("# showDiv"). SlideToggle ("slow", "swing"); / / fade in and fade out mode $("# showDiv"). FadeToggle ("slow", "swing") }

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.