JQuery基础知识(2)
JQuery基础知识(2)
JQuery滑动效果
1、 JQuery slideDown();
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
2、JQuery slideUp();用于向上滑动元素
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
3、JQuery slideToggle();二者之间的切换
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slideDown").click(function(){
$(".panle").slideDown("slow");
});
$(".slideUp").click(function(){
$(".panle").slideUp("fast");
});
//二者切换
$(".slideToggle").click(function(){
$(".panle").slideToggle("slow");
});
$(".slideToggle").mouseover(function(){
$(".panle").slideToggle();
});
});
</script>
<style type="text/css">
div.panle,p.flip{
width: 200px;
height: 100px;
text-align: center;
background-color: greenyellow;
border: 2px solid gray;
padding: 5px;
}
div.panle{
height: 120px;
display: none;
}
</style>
</head>
<body>
<div class="panle">
<p>这是一个未知的世界</p>
<p>这里隐藏了很多的秘密</p>
</div>
<p class="slideDown">JQuery的向下滑动事件</p>
<p class="slideUp">JQuery的向上滑动事件</p>
<p class="slideToggle">滑动切换</p>
</body>
</html>
JQuery的动画效果
1、JQuery animate();创建自定义的动画
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
提示:可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
JQuery基础知识(2)的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识(1)
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- jQuery基础知识准备
一. 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...
- Jquery基础知识;
1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...
随机推荐
- php获取文件名
php获取文件名$phpself =$_SERVER['PHP_SELF']; //获取当前文件名$str = end(explode("/",$phpself)); //去掉'/ ...
- FAT32系统中长文件名的存储(转)
FAT32的一个重要的特点是完全支持长文件名.长文件名依然是记录在目录项中的. 为了低版本的OS或程序能正确读取长文件名文件,系统自动为所有长文件名文件创建了一个对应的短文件名,使对应数据既可以用长文 ...
- 认识ExtJS(04)--常见Web框架的ExtJS改造
常见Web框架的ExtJS改造 怎样开始改造工作? 改造主要集中在对表现层的修改,底层的数据库访问不需要进行任何的变动.也就是说主要集中早这2个方面:一方面是表现部分即是JSP页面:另一方面是客户端与 ...
- POJ 2723 HDU 1816 Get Luffy Out
二分答案 + 2-SAT验证 #include<cstdio> #include<cstring> #include<cmath> #include<stac ...
- HaiHongOJ 1003 God Wang
题目连接:http://oj.haihongblog.com/problem.php?id=1003 线段树维护区间最小值,并且求解下标 #include <stdio.h> #inclu ...
- css3新增的background属性
1.background-size 可取值:auto(背景图片正常显示) size size (150px 40%) cover (背景图片覆盖整个背景) contain(背景图片缩小填满整个背景) ...
- 《JavaScript语言精髓与编程实践》读书笔记
JavaScript语言精髓与编程实践读书笔记 function v1(v1){ v1 = 100; alert('v1:'+v1); } function v2(name){ v1.apply(th ...
- javascript的 replace() 方法的使用讲解
String.prototype.replace() The replace() method returns a new string with some or all matches of a p ...
- win10 下使用虚拟机安装ubuntu及其网络配置
通过虚拟机安装ubuntu 我的机器是64位的win10系统,使用的虚拟机VMware workstation 12 pro 安装的是ubuntu 14.04, 网上教程很多,很详细也有有效 win1 ...
- JQuery收集