-
.animate( properties [, duration ] [, easing ] [, complete ] ) properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只能动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。 除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏 .animate({ width: "toggle" });查看全部
-
.fadeTo( duration, opacity [, complete ] ) 必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。 $("#btnFadeSwitch").click(function() { var v = $("#animation").val(); if (v == "1") { $("p").fadeTo("slow", 0.5); } else if (v == "2") { $("p").fadeTo(1000, 0.2); } else if (v == "3") { $("p").fadeTo(1000, 0.9, function() { alert('完成') }); } });查看全部
-
<p >绯雨</p>使用eq来获得第一个p标签的color值： $("p").eq(0).css("color") //因为eq(num)返回的是个jq对象，所以可以用jq的方法css使用get来获得第一个p标签的color值： $("p").get(0).style.color //因为get(num)返回的是个html对象，所以要使用传统的HTML对象方法，jq对象此时就没用了。当然，你也可以get(num)后把对象转为jq的对象再进行操作： $($("p").get(0)).css("color")-------------------------------------------------------------------------- more eq see： http://api.jquery.com/eq/ -------------------------------------------------------------------------- more get： see： http://api.jquery.com/get/ eq:返回是一个 jquery对象 作用是 将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0，而集合长度变成1 get:是一个html 对象数组作用是取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 <ul> <li>li-1</li> <li>li-2</li> </ul> 比如我们通过jquery选择器 $("li")那么我们将会有两个li元素我如何只想选择其中一个呢? $("li:eq(0)").html() 或者 $("li").eq(0).html() 就是第一个li 这里我们将获得 li-1 $("li:eq(1)").html() 或者 $("li").eq(1).html() 就是第二个li 这里我们将获得 li-2 下面我们看看 get因为get返回是html对象所以我们这里 $("li").get(0).style.color='red' 只有这样用或者将 get返回对象转换成jquery对象在操作 $($("li").get(0)).css("color",'red')即可查看全部
-
jQuery中有个很重要的核心方法each，大部分jQuery方法在内部都会调用each，其主要的原因的就是jQuery的实例是一个元素合集查看全部
-
animate 需要注意一下~ 对于 options名值对中，step, progress 默认的参数需要理解。查看全部
-
除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏查看全部
-
.animate( properties [, duration ] [, easing ] [, complete ] ) .animate( properties, options ) .animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。 参数分解： properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。查看全部
-
因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意查看全部
-
$("button:last").click(function() { $("#a2").slideDown(3000,function(){ alert('动画执行结束') }) });查看全部
-
fadeOut淡出，fadeIn淡入，fadeToggle切换查看全部
-
.hide(fast / slow)这是一个动画设置的快捷方式，'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后在隐藏 <script type="text/javascript"> //点击buttom2 执行动画隐藏 $("button:last").click(function() { $("#a2").hide({ duration: 3000, complete: function() { alert('执行3000ms动画完毕') } }) }); </script>查看全部
-
stop还有几个可选的参数，简单来说可以这3种情况 .stop(); 停止当前动画，点击在暂停处继续开始 .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行 .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值查看全部
-
options参数 duration - 设置动画执行的时间 easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数 step：规定每个动画的每一步完成之后要执行的函数 progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念 complete：动画完成回调查看全部
-
因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery动画</title> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <style> #conten{width: 200px;height: 200px;background:pink;} .new{border: 3px solid yellow;} </style> <script> $(function(){ $('button').click(function(){ $('#conten').slideToggle('3000',function(){ $('#conten').addClass("new"); }); }) }) </script> </head> <body> <div id="conten">你看见了我的小熊了么</div> <button class="btn">快说</button> </body> </html>查看全部
举报
0/150
提交
取消