jQuery 效果使用

.hide()   隐藏匹配的元素。   .hide()     这个方法不接受任何参数。   .hide([duration][,complete])     duration       一个字符串或者数字决定动画将运行多久。     complete       在动画执行完时执行的函数。   .hide([duration][,easing][,complete])     duration       一个字符串或者数字决定动画将运行多久。     easing       一个字符串,表示过渡使用哪种缓动函数。     complete       在动画完成时执行的函数。   用法:

  		     $('button').click(function(){
                  		      $('p').hide(2000)
       		     });
 		      $("div").click(function(){
                		      $(this).hide(2000,function(){
                   			       $(this).remove()
                		      })
            		    }) 

.show()   显示匹配的元素。   .show()     这个方法不接受任何参数。   .show([duration][,complete])     duration       一个字符串或者数字决定动画将运行多久。     complete       在动画执行完时执行的函数。   .show([duration][,easing][,complete])     duration       一个字符串或者数字决定动画将运行多久。     easing       一个字符串,表示过渡使用哪种缓动函数。     complete       在动画完成时执行的函数。   用法:

 		    $("button").click(function () {
  			        $("p").show("slow");
		    });
  		   $("div").first().show("fast", function showNext() {
    			       $(this).next("div").show("fast", showNext);
  		   });

.toggle()   显示或隐藏匹配的元素。   .toggle()     这个方法不接受任何参数。   .toggle([duration][,complete])     duration       一个字符串或者数字决定动画将运行多久。     complete       在动画执行完时执行的函数。   .toggle([duration][,easing][,complete])     duration       一个字符串或者数字决定动画将运行多久。     easing       一个字符串,表示过渡使用哪种缓动函数。     complete       在动画完成时执行的函数。   用法:

		    $("button").click(function () {
			      $("p").toggle();
		    });
		    $("button").click(function () {
			      $("p").toggle("slow");
		    });

.animate()   根据一组css属性,执行自定义动画。   .animate(properties[,duration][,easing][,complete])     properties       一个css 属性和值的对象,动画将根据这组对象移动。     duration(默认:400)       一个字符串或者数字决定动画将运行多久。     easing(默认 swing)       一个字符串,表示过度使用哪种缓动函数。       complete         在动画执行完时执行的函数。    .animate(properties,options)       properties         一个CSS属性和值的对象,动画将根据这组对象移动。       options         一组包含动画选项的值的集合。   用法:

		    $("#go").click(function(){
			        $("#block").animate({
			            width: "70%",
			            opacity: 0.4,
			            marginLeft: "0.6in",
			            fontSize: "3em",
			            borderWidth: "10px"
			         }, 1500 );
		    });
		    $("#right").click(function(){
  			      $(".block").animate({"left": "+=50px"}, "slow");
		    });

    对所有段落应用动画,使其 left 属性变为 50,透明度变为 1(即,不透明,可见),用时 500 毫秒。

		  $( "p" ).animate({
  			      left: 50, opacity: 1
		    }, 500 );

.delay()   设置一个延时来推迟执行队列中后续的项。   .delay(duration[,queueName])     duration       一个整数,指示的毫秒数,用于设定下一个队列推迟执行的时间。     queueName       一个作为队列名的字符串。   效果:     我们可以在 <div id="foo"> 的 .slideUp() 和 .fadeIn() 动画之间设置800毫秒的延时:     $('#foo').slideUp(300).delay(800).fadeIn(400);

    隐藏再显示两个div。其中绿色的div在显示之前,有800毫秒的延时。

		    $("button").click(function() {
      			        $("div.first").slideUp(300).delay(800).fadeIn(400);
      			        $("div.second").slideUp(300).fadeIn(400);
    		  });

.stop()    停止匹配元素当前正在运行的动画。    .stop([clearQueue][,jumpToEnd])     clearQueue       一个布尔值,指示是否取消以队列动画,默认 false;     jumpToEnd       一个布尔值指示是否当前动画立即完成。默认false;    .stop([queue ] [, clearQueue ] [, jumpToEnd ] )       queue         停止动画队列的名称。       clearQueue         一个布尔值,指示是否取消以列队动画。默认 false.       jumpToEnd         一个布尔值指示是否当前动画立即完成。默认false.   用法:

		    $("#stop").click(function(){
			      $(".block").stop();
		      });      //当点击这个运算的时候 立即停止动画。

.fadeIn()   通过淡入的方式显示匹配的元素。   .fadeIn([duration][,complete])     duration(默认:400)       一个字符串或者数字决定动画将运行多久。     complete       在动画完成时执行的函数。   .fadeIn(options)     一组包含动画选项的值的集合。   .fadeIn([duration][,easing][,complete])     duration(默认:400)       一个字符串或者数字决定动画将运行多久。     easing(默认:swing)       一个字符串,表示过渡使用哪种缓动函数     complete       在动画完成时执行的函数。   用法:

		    $(".btn2").click(function(){
  			        $("p").fadeIn();
		    });

.fadeOut()   通过淡出的方式隐藏匹配元素。   .fadeOut([duration][,complete])     duration(默认:400)       一个字符串或者数字决定动画将运行多久。     complete       在动画完成时执行的函数。   .fadeOut(options)     一组包含动画选项的值的集合。   .fadeOut([duration][,easing][,complete])     duration(默认:400)       一个字符串或者数字决定动画将运行多久。     easing(默认:swing)       一个字符串,表示过渡使用哪种缓动函数     complete       在动画完成时执行的函数。   用法:

		    $(".btn2").click(function(){
  			        $("p").fadeOut();
		    });

.fadeTo()    调整匹配元素的透明度。    .fadeTo(duration,opacity[,complete])     duration       一个字符串或者数字决定动画将运行多久。     opacity       0和1之间的数字表示目标元素的不透明度     complete       在动画完成时执行的函数。     .fadeTo(duration,opacity[,easing][,complete])       duration         一个字符串或者数字决定动画将运行多久。       opacity         0和1之间的数字表示目标元素的不透明度       easing         一个字符串,表示过渡使用哪种缓动函数       complete         在动画完成时执行的函数。     用法:

			      $('input').click(function(){
                			          $('#div1').fadeTo("slow",0.2,function(){
                   				              $('#div1').css("display","none");
                			          })
           			       })

.fadeToggle()   通过匹配元素的不透明度动画,来显示或者隐藏他们。     .fadeToggle([duration][,easing][,complete])       duration(默认:400)         一个字符串或者数字决定动画将运行多久。       easing(默认:swing)         一个字符串,表示过渡使用哪种缓动函数       complete         在动画完成时执行的函数。     .fadeToggle(opacity)       opacity         一组包含动画选项的值的集合。     用法:

		      $("input").click(function(){
                		        $('#div1').fadeToggle(2000)
            		    })

.slideDown()   用滑动动画显示一个匹配元素。     .slideDown([duration][,complete])       duration         一个字符串或者数字决定动画将运行多久。       complete         在动画完成时执行的函数。     .slideDown(opacity)        opacity          一组包含动画选项的值的集合。     .slideDown([duration][,easing][,complete])       duration         一个字符串或者数字决定动画将运行多久。       easing         一个字符串,表示过度使用哪种缓动函数。       complete         在动画完成时执行的函数。     用法:

		       $("input").click(function(){
                		          $('#div1').slideDown(2000)
           		       })

.slideUp()   用滑动动画隐藏一个匹配元素。   .slideUp([duration][,complete])     duration       一个字符串或者数字决定动画将运行多久。     complete       在动画完成时执行的函数。   .slideUp(opacity)     opacity     一组包含动画选项的值的集合。   .slideUp([duration][,easing][,complete])     duration       一个字符串或者数字决定动画将运行多久。     easing       一个字符串,表示过度使用哪种缓动函数。     complete       在动画完成时执行的函数。   用法:

		    $("input").click(function(){
                		      $('#div1').slideUp(2000)
            		  })

.slideToggle()   用滑动动画显示或隐藏一个匹配的元素。   .slideToggle([duration][,complete])     duration       一个字符串或者数字决定动画将运行多久。     complete       在动画完成时执行的函数。   .slideToggle(opacity)     opacity       一组包含动画选项的值的集合。   .slideToggle([duration][,easing][,complete])     duration       一个字符串或者数字决定动画将运行多久。     easing       一个字符串,表示过度使用哪种缓动函数。     complete       在动画完成时执行的函数。   效果:

		    $("input").click(function(){
                		      $('#div1').slideToggle(2000)
            		    })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

CSS3 动画Animation的8大属性

animation复合属性。检索或设置对象所应用的动画特效。 如果有多个属性值时以”,”隔开,适用于所有元素,包含伪对象:after和:before

10710
来自专栏deepcc

css3 box-sizing属性

35960
来自专栏iOS开发随笔

iOS去除导航栏和tabbar的1px横线

16040
来自专栏everhad

ImageView缩放选项

ImageView.ScaleType 将图片边界缩放到所在view边界时的缩放选项。 Options for scaling the bounds of a...

25670
来自专栏游戏开发那些事

【python游戏编程之旅】第一篇---初识pygame

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

14020
来自专栏海天一树

小朋友学Python(30):实现带UI的简易计算器(下)

一、最终效果 ? 8.png 二、完整程序 import tkinter #导入tkinter模块 #定义数值 w = 280 ...

426100
来自专栏Java技术分享圈

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例

定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码

12820
来自专栏Coco的专栏

【CSS进阶】原生JS getComputedStyle等方法解析

24050
来自专栏章鱼的慢慢技术路

用Python中的tkinter模块作图(续)

31470
来自专栏菩提树下的杨过

Silverlight:利用Panel实现自定义布局

虽然Silverlight提供了几种基本的布局方式,比如Canvas,Grid,StackPanel,Border...,但有时候可能仍然会觉得不够用。 这时候...

22490

扫码关注云+社区

领取腾讯云代金券