前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery 效果使用

jQuery 效果使用

作者头像
用户1197315
发布2018-01-19 16:55:18
6.3K0
发布2018-01-19 16:55:18
举报
文章被收录于专栏:柠檬先生柠檬先生

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

代码语言:js
复制
  		     $('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       在动画完成时执行的函数。   用法:

代码语言:js
复制
 		    $("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       在动画完成时执行的函数。   用法:

代码语言:js
复制
		    $("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         一组包含动画选项的值的集合。   用法:

代码语言:js
复制
		    $("#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 毫秒。

代码语言:js
复制
		  $( "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毫秒的延时。

代码语言:js
复制
		    $("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.   用法:

代码语言:js
复制
		    $("#stop").click(function(){
			      $(".block").stop();
		      });      //当点击这个运算的时候 立即停止动画。

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

代码语言:js
复制
		    $(".btn2").click(function(){
  			        $("p").fadeIn();
		    });

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

代码语言:js
复制
		    $(".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         在动画完成时执行的函数。     用法:

代码语言:js
复制
			      $('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         一组包含动画选项的值的集合。     用法:

代码语言:js
复制
		      $("input").click(function(){
                		        $('#div1').fadeToggle(2000)
            		    })

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

代码语言:js
复制
		       $("input").click(function(){
                		          $('#div1').slideDown(2000)
           		       })

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

代码语言:js
复制
		    $("input").click(function(){
                		      $('#div1').slideUp(2000)
            		  })

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

代码语言:js
复制
		    $("input").click(function(){
                		      $('#div1').slideToggle(2000)
            		    })
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-11-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档