jQuery如何实现特效?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
1、 jQuery 效果 --隐藏和显示
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnHide").click(function(){
$("#myDiv1").hide();
//语法格式:$(selector).hide(speed,callback);
//可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。
// callback的使用如下,即第2个参数是一个函数,jQuery效果执行完会执行该函数。
// $("#myDiv1").hide(3000,function(){
// alert("myDiv1隐藏了");
// });
});
$("#btnShow").click(function(){
$("#myDiv1").show();
//语法格式:$(selector).show(speed,callback);
//可选参数1:speed 参数规定隐藏/显示的速度,可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是隐藏或显示完成后所执行的函数名称。
});
});
</script>
</head>
<body>
<button type="button" id="btnHide">隐藏</button>
<button type="button" id="btnShow">显示</button>
<div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>
2、 jQuery 效果 - 淡入淡出
(1) fadeIn() 方法用于淡入已隐藏的元素。
(2) fadeOut() 方法用于淡出可见元素。
(3) fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则添加淡入效果。如果元素已淡入,则添加淡出效果。
(4) fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnfadeIn").click(function(){
$("#myDiv1").fadeIn();
//语法格式:$(selector).fadeIn(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是该效果完成后所执行的函数名称。
});
$("#btnfadeOut").click(function(){
$("#myDiv1").fadeOut();
//语法格式:$(selector).fadeOut(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是该效果完成后所执行的函数名称。
});
$("#btnfadeToggle").click(function(){
$("#myDiv1").fadeToggle();
//语法格式:$(selector).fadeToggle(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是该效果完成后所执行的函数名称。
});
$("#btnfadeTo").click(function(){
$("#myDiv1").fadeTo("slow",0.35);
//语法格式:$(selector).fadeTo(speed,opacity,callback);
//第一个参数是必须的:传入的值可以是"slow"、"fast" 、毫秒;
//第二个参数是必须的:传入值是透明度,取值在0-1之间
//第三个参数是可选的:callback 参数是该效果完成后所执行的函数名称。
});
});
</script>
</head>
<body>
<button type="button" id="btnfadeIn">fadeIn</button>
<button type="button" id="btnfadeOut">fadeOut</button>
<button type="button" id="btnfadeToggle">fadeToggle</button>
<button type="button" id="btnfadeTo">fadeTo</button>
<div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>
3、jQuery 效果 -滑动
(1) slideDown() 方法用于向下滑动元素。
(2) slideUp() 方法用于向上滑动元素。
(3) slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素已向下滑动,则向上滑动它们。如果元素已向上滑动,则向下滑动它们。
示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnslideDown").click(function(){
$("#myDiv1").slideDown();
//语法格式:$(selector).slideDown(speed,callback);
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是滑动完成后所执行的函数名称。
});
$("#btnslideUp").click(function(){
$("#myDiv1").slideUp();
//语法格式:$(selector).slideUp(speed,callback);;
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是滑动完成后所执行的函数名称。
});
$("#btnslideToggle").click(function(){
$("#myDiv1").slideToggle();
//语法格式:$(selector).slideToggle(speed,callback);;
//可选参数1:speed 参数规定效果的时长。它可以取值:"slow"、"fast" 或毫秒。
//可选参数2:callback 参数是滑动完成后所执行的函数名称。
});
});
</script>
</head>
<body>
<button type="button" id="btnslideDown">slideDown</button>
<button type="button" id="btnslideUp">slideUp</button>
<button type="button" id="btnslideToggle">slideToggle</button>
<div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>
4、jQuery 效果 - 动画
animate() 方法用于创建自定义动画。
示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btn_animate").click(function(){
$("#myDiv1").animate({left:'250px'});
//语法格式:$(selector).animate({params},speed,callback);
//第一个参数是必须的:值是定义形成动画的 CSS 属性
//第二个参数是可选的:传入的值是"slow"、"fast" 、毫秒
//第三个参数是可选的:callback 参数是该效果完成后所执行的函数名称
//第一个参数的css属性也可以使用相对值,像下面这样
//$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'});
});
});
</script>
</head>
<body>
<button type="button" id="btn_animate">animate</button>
<div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>
5、jQuery -- 停止动画
stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btn_animate").click(function(){
$("#myDiv1").animate({left:'250px'},5000);
});
$("#btn_stop").click(function(){
$("#myDiv1").stop();
//语法格式:$(selector).stop(stopAll,goToEnd);
//可选参数1:规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
//可选参数2:规定是否立即完成当前动画。默认是 false。
});
});
</script>
</head>
<body>
<button type="button" id="btn_animate">animate</button>
<button type="button" id="btn_stop">Stop</button>
<div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>
6、 jQuery -- 链式编程
链式编程:在相同的元素上运行多条 jQuery 命令,一条接着另一条。这样的话,浏览器就不必多次查找相同的元素。如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btnLink").click(function(){
$("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<button type="button" id="btnLink">链式编程</button>
<div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>
感谢各位的阅读!看完上述内容,你们对jQuery如何实现特效大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。