深入理解jquery中的事件与动画

前端之家收集整理的这篇文章主要介绍了深入理解jquery中的事件与动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.鼠标事件

eg:光棒效果

SEOver(function () { //鼠标移过时 $(this).css('background','blue'); }).mouSEOut(function () { //鼠标移过后 $(this).css('background',''); });

});

2.键盘事件

3.表单事件

eg:输入框的文字显示效果

查询输入框 $("input[name='search']").focus(function(){ $(this).val(""); }); $("input[name='search']").blur(function(){ $(this).val("请输入要查询的问题"); });

4.绑定事件与移除事件

bind():绑定事件

01.绑定一个

02.绑定多个

SEOver: function () { $("ul").css("display","none"); },mouSEOut: function () { $("ul").css("display","block"); } });

unbind([type],[fn]):移除事件

当unbind()不带参数时,表示移除所绑定的全部事件

5. 复合事件

1.hover()方法

hover()方法相当于mouSEOver与mouSEOut事件的组合,用于模拟鼠标指针悬停事件

2.toggle()方法(在j 1.7后就删除,不建议使用)

toggle()方法用于模拟鼠标连续click事件

2.toggle()方法删除,不建议使用)

toggle()方法用于模拟鼠标连续click事件

同时toggle()方法还有一个作用:切换元素可见状态

显示的则隐藏,是隐藏的则显示 },function () { $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示 } );

二:动画

1.显示及隐藏元素

show() 在显示元素时,能定义显示元素时的效果,如显示速度

Box").show("slow");//以较慢的速度显示元素

hide() 隐藏元素

Box").hide("slow");//以较慢的速度隐藏元素

这里补充一个is()方法的使用,可以用来判断是显示还是隐藏。

eg:

内容为显示 $(this).hide(); } else { $(this).show(); } })

2.切换元素可见状态(toggle())

toggle()除了可以模拟鼠标的连续单击事件外,还能用于切换元素的可见状态

显示,是显示则隐藏

3.淡入淡出效果

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

});
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000); //以1000毫秒的速度淡出

});

4.改变元素的高度

slideDown() 可以使元素逐步延伸显示,slideUp()则使元素逐步缩短直至隐藏

三:自定义动画

详情 点击

自定义动画animate()

你一定会有所收获的!

以上这篇深入理解jquery中的事件与动画就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/48515.html

猜你在找的jQuery相关文章