10个最常用的jQuery效果

最新推荐文章于 2024-03-12 07:00:00 发布

hubowei

最新推荐文章于 2024-03-12 07:00:00 发布

阅读量1.2k

点赞数

学习 jquery 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

10个最常用的jQuery效果（一）

该篇文章通过10个最常用的jQuery效果向设计师和初学者讲述了如何使用jQuery创建Javascript特效。

jQuery如何运行?

首先你需要下载jQuery库并将其插入到你的html页面中(最好是放在<head>标签内)。然后你需要调用脚本运行函数。下面的图例像你详细解释了jQuery是如何运行的。

如何获取元素?

编写jQuery函数相对来说比较简单。你需要掌握的关键点就是如何准确的使用你所需效果的元素。

$("#header") = 获取id为"header"的元素
$("h3") = 获取所有标签为<h3>的元素
$("div#content .photo") = 获取所有<div id="content">内类为"photo"的元素
$("ul li") = 获取所有<ul>内的<li>元素
$("ul li:first") = 获取<ul>内的第一个<li>元素

1.简单的滑动版

让我们从最简单的滑动版开始。你可能已经见过很多类似的效果了，当你点击一个链接的时候，一个滑动版便向上(下)展开 (view demo)

当类名为"btn-slide"的元素被点击的时候，它将向上(或下)切换(slideToggle) <div id="panel">元素，然后切换一个CSS类"active"到<a class="btn-slide">元素。通过使用css样式，类名为.active的元素将会切换箭头图片的背景位置。

$(document).ready(function(){
 $(".btn-slide").click(function(){
 $("#panel").slideToggle("slow");
 $(this).toggleClass("active");
 });
 
 
 });

2.简单的消失效果

该示例向你讲述如何设计点击图片按钮后该区域内容消失的效果 (view demo)

当图片元素<img class="delete"> 被点击的时候，它会查找其父元素 <div class="pane">，并且缓慢的隐藏其透明度。

$(document).ready(function(){
 $(".pane .delete").click(function(){
 $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
 });
 
 
 });

3Chain-able过渡效果

现在让我们来看看jQuery强大的Chain-able效果。仅需几行代码就可以设计出一个按比例变化大小并且渐变消失的飞行的盒子。(view demo)

第1行和第2行: 创建<a class="run">元素被点击时的函数
第3行: 赋予<div id="box">元素的.animate函数不透明度值为0.1, 左边可到达的距离为400px, 速度为1200毫秒
第4行: 赋予.animate函数不透明度值为0.4，顶部距离160px, 高20, 宽20, 速度为"slow"
第5行: 接下来赋予.animate函数不透明度值为1, 左边距离为0, 高100, 宽100, 速度为"slow"
第6行: 设置.animate函数的top值为0,速度为"fast"
第7行: 调用slideUp函数 (默认速度值为"normal")
第8行: 调用slideDown, 速度值为"slow"

$(document).ready(function(){
 $(".run").click(function(){
 
 
 $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
 .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
 .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
 .animate({top: "0"}, "fast")
 .slideUp()
 .slideDown("slow")
 return false;
 
 
 });
 
 
 });

4a.折叠效果1

下面是一个折叠效果 (view demo)

第1行：为<div class="accordion">内的第一个<H3>元素添加名为"active"的类，并应用css样式("active"类将转换箭头图标的背景位置)。
第2行：隐藏<div class="accordion">内的非第一行的所有<p>元素。

当<h3>元素被点击的时候，它将滑动并切换(slideToggle)下一个<p>元素并且向上滑动(slideUp)它的子元素,然后切换类名为"active"的元素。

$(document).ready(function(){
 $(".accordion h3:first").addClass("active");
 $(".accordion p:not(:first)").hide();
 
 
 $(".accordion h3").click(function(){
 
 
 $(this).next("p").slideToggle("slow")
 .siblings("p:visible").slideUp("slow");
 $(this).toggleClass("active");
 $(this).siblings("h3").removeClass("active");
 
 
 });
 
 
 });

4b.折叠效果2

该示例和上面的很类似，不过可以让你自定义默认展开的面板。 (view demo)

In the CSS stylesheet,将.accordion p设置为display:none. 现在，假设你要将第三个面板设置为默认打开的面板。你可以这样写$(".accordion2 p").eq(2).show(); (eq = equal)。注意起始值为0。

$(document).ready(function(){
 $(".accordion2 h3").eq(2).addClass("active");
 $(".accordion2 p").eq(2).show();
 
 
 $(".accordion2 h3").click(function(){
 $(this).next("p").slideToggle("slow")
 .siblings("p:visible").slideUp("slow");
 $(this).toggleClass("active");
 $(this).siblings("h3").removeClass("active");
 });
 
 
 });

5a.动态悬停效果1

该示例将会创建一个非常漂亮的渐入渐出的动画悬停效果 (view demo)

当鼠标悬停在菜单上的时候，将会查找下一个<em>元素，并创建animate函数，设置其不透明度和顶部位置。

$(document).ready(function(){
 $(".menu a").hover(function() {
 $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
 }, function() {
 $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
 });
 
 
 });

5b.动态悬停效果2

该示例为菜单链接添加title属性，并将它放在一个变量里面，然后附加到<em>标签上。 (view demo)

第一行附加了一个空的<em> 标签到菜单的 <a> 元素上。

当鼠标悬停在链接上时，获取title 属性，将其存放在"hoverText"变量中，然后将带有<em>标记的文本内容赋予变量hoverText的值。

$(document).ready(function(){
 $(".menu2 a").append("<em></em>");
 
 
 $(".menu2 a").hover(function() {
 $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
 var hoverText = $(this).attr("title");
 $(this).find("em").text(hoverText);
 }, function() {
 $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
 });
 
 
 });

6.整个块元素点击效果

该示例展示了如何创建整个块元素点击效果变换的方式。(view demo)

假设你有一个类名为"pane-list"的<ul>a，并让其子元素<li> 的整个模块可以点击。你可以为".pane-list li"创建一个点击函数，当其被点击的时候，函数会查找<a>元素，并重新定向到href属性值的地址。

$(document).ready(function(){
 $(".pane-list li").click(function(){
 window.location=$(this).find("a").attr("href"); return false;
 });
 
 
 });

7.折叠面板

让我们结合前面的一些技术来创建一个可折叠的面板。(view demo)

第1段: 隐藏第一个面板后的所有类名为"message_body"的块
第2段: 隐藏第5个以后的所有<li>元素
第3段：当<p class="message_head">被点击的时候，滑动并且换(slideToggle)到下一个<div class="message_body">块。
第4段: 当<a class="collpase_all_message">按钮被点击的时候，向上滑动所有的<div class="message_body">块。
第5段: 当<a class="show_all_message">被点击的时候，隐藏该元素，显示<a class="show_recent_only">元素,并且向下移动(slideDown)所有第5个以后的<li>元素
第6段: 当<a class="show_recent_only">被点击的时候, 隐藏该元素，显示<a class="show_all_message">元素,并且向上移动(slideUp)所有第5个以后的<li>元素

$(document).ready(function(){
 //hide message_body after the first one
 $(".message_list .message_body:gt(0)").hide();
 
 
 //hide message li after the 5th
 $(".message_list li:gt(4)").hide();
 
 
 //toggle message_body
 $(".message_head").click(function(){
 $(this).next(".message_body").slideToggle(500)
 return false;
 });
 
 
 //collapse all messages
 $(".collpase_all_message").click(function(){
 $(".message_body").slideUp(500)
 return false;
 });
 
 
 //show all messages
 $(".show_all_message").click(function(){
 $(this).hide()
 $(".show_recent_only").show()
 $(".message_list li:gt(4)").slideDown()
 return false;
 });
 
 
 //show recent messages only
 $(".show_recent_only").click(function(){
 $(this).hide()
 $(".show_all_message").show()
 $(".message_list li:gt(4)").slideUp()
 return false;
 });
 
 
 });

hubowei

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
10个最常用的jQuery效果

10个最常用的jQuery效果（一）该篇文章通过10个最常用的jQuery效果向设计师和初学者讲述了如何使用jQuery创建Javascript特效。jQuery如何运行?首先你需要下载jQuery库并将其插入到你的html页面中(最好是放在标签内)。然后你需要调用脚本运行函数。下面的图例像你详细解释了jQuery是如何运行的。如何获取元素?编写jQuery函数相对来
复制链接

扫一扫