为了账号安全,请及时绑定邮箱和手机立即绑定
  • 下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none •如 果提供回调函数参数,callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数,但是 this会设成将要执行动画的那个DOM元素,如果多个元素一起做动画效果,那么要非常注意,回调函数会在每一个元素执行完动画后都执行一次,而不是这组 动画整体才执行一次
    查看全部
  • show与hide方法是修改的display属性,通过是visibility属性布局需要通过css方法单独设置 •如果使用!important在你的样式中,比如display: none !important,如果你希望.show()方法才能正常工作,必须使用.css('display', 'block !important')重写样式 •如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度
    查看全部
  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()成为一个动画方法。.hide()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数: .hide(fast / slow) 这是一个动画设置的快捷方式,'fast' 和 'slow' 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后在隐藏
    查看全部
  • <script type="text/javascript"> $("#exec").click(function() { var v = $("#animation").val(); var $aaron = $("#aaron"); if (v == "1") { //观察每一次动画的改变 $aaron.animate({ height: '50' }, { duration :2000, //每一个动画都会调用 step: function(now, fx) { $aaron.text('高度的改变值:'+now) } }) } else if (v == "2") { //观察每一次进度的变化 $aaron.animate({ height: '50' }, { duration :2000, //每一步动画完成后调用的一个函数, //无论动画属性有多少,每个动画元素都执行单独的函数 progress: function(now, fx) { $aaron.text('进度:'+arguments[1]) // var data = fx.elem.id + ' ' + fx.prop + ': ' + now; // alert(data) } }) } }); </script>
    查看全部
  • function(now, fx) {$aaron.text('高度的改变值:'+now)};传入两个参数 now是当前运动的值,如果你设置运动时height那他就是height,如果有多个运动参数now的值为最后一个参数值,fx为运动对象的引用,函数不止可以让你传出运动对象的运动值同时你也可以通过fx控制对象的其他属性,例如fx.elem.id 可以获取id试问可以获取对象id还有什么不能做到啊,fx很好用的
    查看全部
  • 停止动画stop stop() 点击停止,动画1停,动画2会继续,再点击停,动画2会停,动画3会继续 stop(true) 点击停止,动画都停了。后面的不会继续了。 stop(true,true) 在动画1运动时,点击停,直接跳到动画1的目标状态。点击执行,动画2继续,点击停,直接跳到动画2的目标状态。状态3同理。 点击停后,后面的动画会自动继续的只有stop() 注意:如果动画未完成停止了,那么动画完成时执行的回调函数是不会被调用的。
    查看全部
  • animate(下) 传递一个对象参数,拿到动画执行状态的一些通知。 .animate(properties,options) options参数: duration:动画执行的使劲 easing:规定要使用的easing函数,过渡使用哪种缓动函数 step:规定每个动画的每一步完成之后要执行的函数。 progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念。 complete:动画完成回调 注意:如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次。 arguments是javaScript的内置对象,类数组,储存的是函数的参数。通过使用arguments对象,函数能够调用数量不确定的参数。arguments[1]表示函数progress的第二个参数,即fx。 代码案例中,+ arguments[1] 相当于 + fx 结果是一样的
    查看全部
  • <script> $(".demo").animate({ first:2, second:10 }, { step:function(n,fx){ // 动画元素的每个动画属性每一次动画效果的执行都将调用的函数。第1个参数是当前动画正在改变的属性的实时值(每1次动画过程中,属性值的实时反馈呈现);第2个参数为修改Tween 对象提供了一个机会来改变animate第1个参数中设置的属性在动画结束时的值。 // fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如 // 执行动画的元素:elem; // 动画正在改变的属性:prop; // 正在改变属性的当前值:now; // 正在改变属性的结束值:end; // 正在改变属性的单位:unit;等 // 可在这里改变animate第1个参数中设置的属性second在动画结束时的值 if(fx.prop=="second"){fx.end=5} console.log(fx.prop+": "+n); }, duration:2000 }) </script>
    查看全部
  • 动画animate(上) animate方法更灵活,可以精确的控制样式属性从而执行动画。 .animate({properties},duration,function) 属性设置,持续时间,回调函数 properties:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的,除非另有说明;比如常见的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不行。 注意,css样式使用DOM名称(比如"fontSize")来设置,而非css名称(比如"font-size") 特别注意单位,属性值的单位是像素(px),除非另有说明,单位em和%需要指定使用。 如 .animate({ width:100, left:"20px", opacity:"show", fontSize:"10em" },1000) 除了定义数值,每个属性能使用"show","hide",和"toggle"。快捷控制显示、隐藏、切换 .animate({ left:"+=100px" },"fast"); 变化后的左边距,是当前的左边距+100px duration持续时间,以毫秒为单位,数值越大,越慢,还可以用"fast"和“slow”,分别表示持续时间为200毫秒和600毫秒。
    查看全部
  • toggle、slideToggle与fadeToggle toggle:切换显示与隐藏结果;动态效果是从右向左,横向运动。 slideToggle:切换上下收起展开;动态效果从下至上,竖向运动。 fadeToggle:切换淡入淡出; fadeIn(淡入),fadeOut(淡出),fadeTo(到指定透明度)
    查看全部
  • 淡入效果fadeTo fadeIn和fadeOut都是修改元素的opacity属性,变化的区间是0-1 fadeTo可以直接变化到给定的透明度。 .fadeTo(duration,opacity,function) 持续时间,透明度,回调函数(非必需)
    查看全部
  • 1、get方法是通过已知的索引在合集中找到对应的元素。如果反过来,已知元素如何在合集中找到对应的索引呢? 2、.index()方法,从匹配的元素中搜索给定元素的索引值,从0开始计数。 (1)语法:参数接受一个jQuery或者dom对象作为查找的条件 ①.index() ②.index( selector ) ③.index( element ) 注意: ①如果不传递任何参数给.index()方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置 ②如果在一组元素上调用.index(),并且参数是一个DOM元素或jQuery对象,.index()返回值就是传入的元素相对于原先集合的位置 ③如果参数是一个选择器,.index()返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则.index()返回-1 (2)例如 <ul> <a></a> <li id="test1">1</li> <li id="test2">2</li> <li id="test3">3</li> </ul> ①$("li").index()没有传递参数,反正的结果是1,它的意思是返回同辈的排列循序,第一个li之前有a元素,同辈元素是a开始为0,所以li的开始索引是1 ②如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理 $("li").index(document.getElementById("test2")) //结果:1 $("li").index($("#test2")) //结果:1
    查看全部
  • 1、jQuery是一个合集对象,如果需要单独操作合集中的的某一个元素,可以通过.get()方法获取到 (1)例如 以下有3个a元素结构: <a>1</a> <a>2</a> <a>3</a> 通过jQuery获取所有的a元素合集$("a"),如果想进一步在合集中找到第二2个dom元素单独处理,可以通过get方法 (2)语法: .get( [index ] ) 注意: ①get方法是获取的dom对象,也就是通过document.getElementById获取的对象 ②get方法是从0开始索引 所以第二个a元素的查找:$(a).get(1) (3)负索引值参数 ①get方法还可以从后往前索引,传递一个负索引值,注意的负值的索引起始值是-1 同样是找到第二元素,可以传递$(a).get(-2)
    查看全部
  • 1、页面中,通过input可以获取用户的输入值,例如常见的登录信息的提交处理。用户的输入不一定是标准的,输入一段密码:' 1123456 ",注意了: 密码的前后会留空,这可能是用户的无心的行为,但是密码确实又没错,针对这样的行为,开发者应该要判断输入值的前后是否有空白符、换行符、制表符这样明显的无意义的输入值。 2、jQuery.trim()函数用于去除字符串两端的空白字符 这个函数很简单,没有多余的参数用法 注意: ①移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab) ②如果这些空白字符在字符串中间时,它们将被保留,不会被移除
    查看全部
  • 1、在PHP有in_array()判断某个元素是否存在数组中,JavaScript却没有,但是jQuery封装了inArray()函数判断元素是否存在数组中。 注意:在ECMAScript5已经有数据的indexOf方法支持了,但是jQuery保持了版本向下兼容,所以封装了一个inArray方法 2、jQuery.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。 (1)语法: jQuery.inArray( value, array [, fromIndex ] ) (2)用法非常简单,传递一个检测的目标值,然后传递原始的数组,可以通过fromIndex规定查找的起始值,默认数组是0开始 (3)例如:在数组中查找值是5的索引 $.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4 注意:如果要判断数组中是否存在指定值,你需要通过该函数的返回值不等于(或大于)-1来进行判断
    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的基础语法 2、jQuery当中的动画处理

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!