jQuery study notes jQuery animation effect_jquery

Basic animation code:

Copy code The code is as follows: Hello World jQuery! $(document).ready(function() {

//The basic animation functions are mainly divided into three categories: show, hide and toggle. All provide parameter-less versions //And all provide overloading of two parameters, such as show(speed, [callback ] ), //callback, the signature is as follows: function callback() {this;} this in the callback function is the DOM object that executes this function. It will be executed at the end of the animation. //Because the callback function It can be omitted, so you can pass in a value as the only parameter, and the element will be displayed/hidden with animation effect within the time specified by the parameter //The parameter can use a string with one of three predetermined speeds ("slow" , "normal", "fast") //Or directly use numbers to represent the animation duration, the unit is millisecond value (such as 500).

//Animation speed var speed = 500; //Binding event processing $("#btnShow").click(function(event) { //Cancel event bubbling event.stopPropagation(); //Set the popup layer position var offset = $(event.target).offset(); $("#divPop ").css({ top: offset.top $(event.target).height() "px", left: offset.left }); //Animation display $("#divPop") .show(speed); }); //Click a blank area to hide the pop-up layer $(document).click(function(event) { $("#divPop").hide(speed ) }); //Click the popup layer to hide itself $("#divPop").click(function(event) { event.stopPropagation() $("#divPop ").hide(speed); });

var flip = 0; $("#btnP").click(function () { $("p").toggle("fast"); // $("p").toggle( flip % 2 == 0 ); });

//Bind event processing $("#btnT").click(function(event) { //Cancel event bubbling event.stopPropagation() ; //Set the popup layer position var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top $(event. target).height() "px", left: offset.left }); //Switch the display state of the pop-up layer $("#divPop").toggle(speed); }) ;

});

Show prompt text Show paragraph toggle function test # 000000; position: absolute; display:none; width: 600px; height: 100px;"> Popup layer This is a paragraph

This is the second paragraph

==================================== ========================== Sliding animation and transparent animation effect code:

Copy code The code is as follows: Hello World jQuery! $(document).ready(function() {

//滑动动画效果 $("#btnShow").click(function(){ $("#divPop").slideDown("fast"); });

$("#btnHide").click(function(){ $("#divPop").slideUp("slow"); });

$("#btnT").click(function(){ $("#divPop").slideToggle("slow"); });

//透明度动画效果

$("#bShow").click(function(){ $("#divPop").fadeIn(2000); });

$("#bHide").click(function(){ $("#divPop").fadeOut("slow"); });

//指定到透明度 $("#bHelf").click(function(){ $("#divPop").fadeTo("slow",0.3); });

});

显示提示文字 隐藏提示文字 toggle函数测试

淡入 淡出 半透明 #000000; position: absolute; display:none; width: 600px; height: 100px;"> 弹出层 这个是一个段落

这个是第二个段落

jQuery study notes jQuery animation effect_jquery

Related articles