jQuery学习之动画

一,show()和hide()

show()和hide()方法在不带任何参数的情况,相当于css(“display”,“none/block/inline”),

作用是立即隐藏或显示匹配的元素,不会有任何动画。

如果需要带动画,可以向show()方法中,加入参数

exp:$(‘#id‘).show("slow");

$(‘#id‘).show(1000);//1000毫秒,相当于1秒

二,fadeIn()和fadeOut()

这两个方法只改变元素的透明度,fadeOut()在指定的一段时间内降低元素的不透明度,直到

元素完全消失("display:none");fadeIn()正好相反。

三,slideUp()和slideDown()

这两个方法只会改变元素的高度

四,自定义动画animate()

可以自定义动画,同时改变元素的高度,宽度,不透明度。

animate(params,speed,callback)

params:一个包含样式属及值得映射{property1:"value1",property:"value2"}

speed:速度参数,可选

callback:在动画完成执行时的函数,可选

$(function(){

$("#panel").click(function(){

$(this).animate({left:"+=500px"},300);  //在当前位置累加500px

});

})

五,动画回调函数

动画最后一步时改变元素的样式

$(function(){

$("#panel").click(function(){

$(this).animate({left:"+=500px",opacity:"1"},300);

.animate ({top:"200px",width:"200px"},3000,function(){

$(this).css("border","5px solid blue");

});

})

六,停止动画和判断是否处于动画状态

1,停止元素的动画

stop([clearQueue],[gotoEnd])

clearQueue 是否清空未执行的动画队列

gotoEnd     是否直接将正在执行的动画跳转到末状态

2,判断元素是否处于动画状态

if(!$(element).is(":animated")){

//如果当前没有进行动画,则添加新的元素

}

3,延迟动画 delay()

七,其他动画方法

toggle()

切换可见状态

slideToggle()

通过高度变化切换元素的可见性

fadeTo()

可以把元素的不透明度以渐进的方式调整到指定值

fadeToggle

通过透明度的方式切换元素的可见性

时间: 2024-07-28 20:03:40

jQuery学习之动画的相关文章

jquery学习随笔(动画效果)

show hide jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显 示内容和隐藏内容. $('.show').click(function () { //显示 $('#box').show(); }); $('.hide').click(function () { //隐藏 $('#box').hide(); }); //使用.show()和.hide()的回调函数,可以实现列队动画效果. $('.show').click(function

jQuery学习-自定义动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义动画</title> <script src="js/jquery.js"></script> <style> .me1{ position: absolute; left: 20%; top: 50%; margin-left: -1

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

jquery学习笔记(三)事件和动画

一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} )  jquery的ready函数会在dom准备完毕后执行,并且可以多次使用 $(selector).load( function(){} ) 此方法相当于js自身的onload方法 如 $(window).load(function(){})    相当于  window.onload=function(){} ------

jquery学习笔记-----事件和动画

一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} )  jquery的ready函数会在dom准备完毕后执行,并且可以多次使用 $(selector).load( function(){} ) 此方法相当于js自身的onload方法 如 $(window).load(function(){})    相当于  window.onload=function(){} ------

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jQuery学习-------jQuery选择器

基本选择器: id选择器:$("#id") 标签选择器:$("tag") 类选择器:$(".classname") 通配选择器:$("*") 组选择器:$("selector1,selector2,...,selectorN") 层次选择器: 包含选择器:$("ancestor descendant") 子选择器:$("parent>child") 相邻选择器:

jQuery学习之路(四)之过滤选择器

今天是第四课主要学习过滤选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson4 过滤选择器</title> <link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>

jQuery学习之开篇

吐槽 最近比较烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,如果没有掌握JS.JQuery想要进行后续的开发会非常困难.得,又得学下JQuery,一种蛋蛋的忧伤.一直认为前端的水非常的深这段时间算是见识到了,哎,不过工作还的继续,吐槽完了,卯足干劲充电吧! 前言 某前端白痴一个,会点html+css+js.JQuery的学习书籍看的是<锋利的JQuery>,先入门看了两章,感觉