The effect function of jquery

jquery has an effect function
Method description
Animate () applies a "custom" animation to the selected element
Clearqueue () removes all queued functions from the selected element (still not running)
Delay () Setting delays for all queued functions (still not running) on the selected element
Dequeue () Run the next queued function of the selected element
FadeIn () fade in selected element to completely opaque
FadeOut () fades out of selected elements to completely opaque
FadeTo () weakens the selected element to a given opacity
Hide () hides the selected element
Queue () Displays the queued function of the selected element
Show () displays the selected element
Slidedown () swipe to show selected elements by adjusting the height
Slidetoggle () Toggle for sliding and sliding display of selected elements
Slideup () swipe to hide selected elements by adjusting the height
Stop () stops the animation from being run on the selected element
Toggle () Toggles the selected element to be hidden and displayed

Animate () is used as a method in jquery to create animated effects, and the animate () method in jquery gives that page a good visual effect

< div class = "wrap" >    < img src = "images/s1.jpg" alt = "photo" />    < div class = "cover" >      < h3 >尽快来房间爱离开风口浪尖</ h3 >      < p >发货空间按恢复健康等哈就快递费还看见爱会尽快恢复可骄傲的划分空间的及刻录机</ p >      < p >< a href = "#" >风华绝代</ a ></ p >    </ div > </ div >

Css

We need to use CSS to line up. Wrap, and to hide part of the. Cover overlay, it is displayed by calling jquery when the mouse is slipped. .wrap{ position : relative ; float : left ; width : 200px ; height : 200px ; margin : 5px ; background : #e8f5fe ; overflow : hidden ;} .wrap img{ position : absolute ; top : 0 ; left : 0 } .wrap h 3 { line-height : 30px ; font-size : 14px ; color : #fff } .wrap p{ line-height : 20px } .cover{ position : absolute ; background : #000 ; height : 120px ; width : 100% ; padding : 3px ; top : 170px ; }

Jquery

First I set the opacity of the overlay to 0.8, and then when the mouse slides, use the hover function to invoke animate animations. $( function (){    $( ".cover" ).css( "opacity" ,.8);    $( ".wrap" ).hover( function (){      $( ".cover" , this ).stop().animate({top: "80px" },{queue: false ,duration:160});    }, function (){      $( ".cover" , this ).stop().animate({top: "170px" },{queue: false ,duration:160});    }); }); Toggle <p> element Display and hide state:

$ (". Btn1"). Click (function () {  $("p").hide(); });

Definition and usage

The toggle () method Toggles the visible state of the element.

If the selected element is visible, the elements are hidden and displayed if the selected element is hidden.

Grammar

$ (selector). Toggle (speed,callback,switch)

The effect function of jquery