jQuery基础效果-阿里云开发者社区

开发者社区> 技术小牛人> 正文

jQuery基础效果

简介:
+关注继续查看

jQuery基础效果

$(document).ready(function(){}这句话的意思是页面加载完成后执行,

等同于js中的window.onload,大家学了jQuery的话应该就会知道

 

$(document).ready(function(){//这行代码意思是页面加载后执行

           $("#bun1").click(function(){//#ID的意思  .Class的意思   $("#bun1")选择你需要用到的元素,这句话的意思是我要给一个IDbun1的元素加点击事件

           $(".h11").hide('fast')//一样$(".h11")选择元素,选Class名为11的元素

           })

 

解释完了,jQuery就是这么简单

现在来学习基础效果

 

 

1隐藏和显示

隐藏的代码是hidespeedfunction

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

显示的是代码showspeedfunction

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

如果你要弄隐藏和显示的效果,你需要2个按钮一个隐藏,一个显示,有个代码可以让你给一个按钮施加2个效果,既可以隐藏也可以显示,那就是

toggle(speedfunction)

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

代码如下

$(document).ready(function(){

           $('#bun1').click(function(){

             //$('#div1').hide(2000)//隐藏 隐藏的速度是2秒完成

             // $('#div1').show(2000)//显示 显示的速度为2秒完成

             $('#div1').toggle(2000)//既可以隐藏也可以显示

           })

          

        })

 

 

2淡入淡出

淡入隐藏的元素(把元素隐藏的给淡入出来,可以给人看到)

fadeIn(speed,function)

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

 

 

淡出显示的元素(把元素淡出,隐藏起来,我总是容易弄混)

fadeout(speed,function)

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

既可以淡入又可以淡出

fadeToggle(speed,function)

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

给淡入淡出的元素设置透明度

fadeTo(speed,opacity,function)

第一个参数可以是 毫秒 slow fast   第三个参数,就是完成隐藏后执行的函数 opacity是必须的参数(值为0-1之间)

 

代码如下

$(document).ready(function(){

           $('#bun1').click(function(){

             //$('#div1').fadeOut(2000)//淡出

             //$('#div1').fadeIn(2000)//淡入

             //$('#div1').fadeToggle(2000)既可以淡入又可以淡出

             $('#div1').fadeTo(2000,0.2)

           })

          

        })

 

 

3滑动

向下滑动

slideDown(speed,function)

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

向上滑动

slideUp(speed,function)

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

既能向上又能向下

slideToggle(speed,function)

第一个参数可以是 毫秒 slow fast   第二个参数,就是完成隐藏后执行的函数

 

代码如下

$(document).ready(function(){

           $('#bun1').click(function(){

             //$('#div1').slideDown(2000)//向下滑动隐藏到消失

             //$('#div1').slideUp(2000)//向上滑动隐藏到消失

             $('#div1').slideToggle(2000)//既可以向上又可以向下

           })

          

        })

 

 

4动画

animate({params},speed,function)用于创建自定义动画

参数params必选 为形成动画的css属性

speed参数可以是 毫秒 slow  fast   function参数,就是完成隐藏后执行的函数

$(document).ready(function(){

           $('#bun1').click(function(){

$('#div1').animate({height:'200px',width:'200px'},2000)

           })

          

        })

 

 

Animate({})里面写多个css样式会同时执行

如果这样写,就会排队执行,先执行第一个,然后第二个,接着第三个,依次执行

$('#div1').animate({height:'200px'},2000)

$('#div1').animate({width:'200px'},2000)

 

 

还有一种写法是在原本的宽度上架200像素 使用+=,具体的其他用法,遇到才知道

$('#div1').animate({height:'+=200px'},2000)

 

 

 

 

stop(stopALLgoToEnd)用来停止动画

stopAll参数是否清除动画队列,默认是false,是停止当前动画,执行队列中的下一个动画

goToEnd参数是否立即完成当前动画,默认是false

 

因此stop()不加参数的用法是清楚当前动画,执行队列中的下一个,具体用法,根据实际应用了

 

 

 

5 chaining技术的作用:能把动作/方法链接起来。

只需要再动画之后加.就可以链接起来

$(document).ready(function(){

           $('#bun1').click(function(){

               $('#div1').animate({height:'+=200px'},2000).css('background','yellow').animate({width:'+=100px'},2000)            

          

           })

          

        })

 

本文转自

新网学会 51CTO博客,原文链接:http://blog.51cto.com/xwxhvip/2049405 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery动画 -- 4.升级版遮罩效果的图片走廊--带自动运行效果
  我将上一章中了插件做了个小小的升级,实现了自动运行效果,完整代码大家见demo。    主要的变化点有:把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval,添加selector元素的hover事件。
930 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8361 0
jQuery Countdown Timer 倒计时效果
  这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒。倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒计时。
931 0
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973 ...
871 0
jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
  长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常采用角度为 45 度的投影,给对象添加了一份立体感。长阴影快速发展为流行的设计趋势,并经常被应用到扁平设计方案的对象。更详细的介绍可以阅读《扁平化设计的最新趋势 – 长阴影》一文,相信看了之后你会长阴影设计有更深的了解。
625 0
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
  元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告。Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能。这些功能包括:处理多个固定元素,启用/禁用的行为取决于对元素在视口中的位置和回调。
758 0
css常见效果
1.ul li横排 /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */...
902 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载