jQuery 常用效果
hide和show 同样有 fadeInhe fadeOut 的功能
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(2000);
});
$("#show").click(function(){
$("p").show(2000);
});
});
toggle 隐藏显示自动切换 同样后面可以跟时间 做到 fadeToggle 的效果
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000);
});
});
淡入淡出:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
fadeToggle 淡入淡出自动切换
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
slideToggle 滑动效果 自动切换 做到slideDown() 与 slideUp() 方法之间进行切换。
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
animate 动画效果:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
设置元素 不断的增加范围
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
元素移动到右边,然后增加文本的字号
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
callback 执行效果后回调:
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
jQuery 常用效果的更多相关文章
- jQuery常用效果
1.滑动效果 向上效果:slideUp() 向下效果:slideDown() 向上与向下切换:slideToggle() 2.淡入淡出效果 显示与隐藏切换:fadeToggle() 3.显示隐藏 显示 ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- jS事件之网站常用效果汇总
下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...
- JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
- jquery常用函数与方法汇总
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
随机推荐
- 取得<asp:TextBox中的值:
取得<asp:TextBox中的值: var a= document.getElementById("<%= (ID名).ClientID %>").valu ...
- 定义一个servlet用于处理所有外部接口类 架构思路
架构思路”: 所有外部URL访问请求(对外提供的接口)全部交给intServiceServlet处理, 然后servlet调用BPO通过URL中的命名去寻找相应的javaBean.接口BO,然后接口B ...
- Codeforces Beta Round #34 (Div. 2)
Codeforces Beta Round #34 (Div. 2) http://codeforces.com/contest/34 A #include<bits/stdc++.h> ...
- 问题1:设置了text-overflow : ellipsis未起作用
<style type="text/css"> * { padding: 0; } .div01 , .div02 { margin-top: 10px; border ...
- 【python】初识python
[命名规范] 模块名:小写字母,单词之间用_分割:例如:ad_stats.py 包名:和模块名一样 类名:单词首字母大写:例如:ConfigUtil 全局变量名:大写字母,单词之间用_分割:例如:NU ...
- 关于xshell连接阿里云服务器后报错的问题,git安装失败,找不到git包
1.如果安装git出现这样的错误的,在接下来键入这样一行命令 curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-c ...
- Django中使用django_debug_toolbar
一 概述 django_debug_toolbar 是django的第三方工具包,给django扩展了调试功能. 包括查看执行的sql语句,db查询次数,request,headers,调试概览等. ...
- C# Convert.ToInt32和int.Parse转换null和空字符串时的不同表现
Convert.ToInt32最终调用的函数见下图: int.Parse调用的函数见下图: 具体的见https://www.cnblogs.com/leolis/p/3968943.html的博客,说 ...
- git bug修复
在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你接到一个修复一个代号101的bug的任务时,很自然地,你想创建一个分支i ...
- mybatis进阶--mapper输入映射和输出映射
我们知道,mapper.xml是我们配置操作数据库的sql语句的地方.其中每个sql语句对应着一个方法,每个方法都有自己的输入输出参数类型.那么这些类型都是怎么配置的呢?今天我们来一起学习下. 输入映 ...