jQuery学习笔记4——简单动画2

最近沉迷C#,竟然突然忘记了还有jQuery的坑没有填完。

加快进度把它学出来,下午要复习有机化学了,下周期中考试QAQ

ESnm5D.jpg


animate动作

这个动作用来创建自定义动画。其原理是CSS的改变。比如说我们要移动一个div,就可以使用它。但是要注意,所有HTML元素都有一个静态位置,这个位置是不可以移动的。如果需要对位置进行操作,需要首先把元素的CSS position属性设置为relative,fixed或者absolute才可以。

书写的语法规则是:$(selector).animate({params},speed,callback);,params参数代表CSS属性列表,speed与callback则是可选参数,代表速度和执行完毕后执行的下一个函数的名称。如果需要修改很多css,则需要把它们用{}括起来。

animate()方法可以操作几乎所有CSS属性,但是它对CSS的名称有要求。即不可以使用带有-符号连接的名称。像是paddingLeft是可以的,但是padding-left是不可以的。

对于元素的运动,可以用绝对位置描述也可以用相对位置描述。绝对位置也就是比如说我要将它移动到左边,我写了一个left: 250px,这样这个元素就会移动直到left为250px为止。相对位置比较方便,它直接指明你要加多少px或者减多少px,在值的前面加上+=或者-=就可以。属性的值甚至可以使用‘hide’,‘show’,和‘toggle’。

默认地,jQuery为动画提供一个队列。如果在同一时刻有多个animate调用,jQuery会自动创建一个内部队列然后逐个运行这些调用。

stop()方法可以让动画急停。它适用于任何jQuery动画,包括之前学习的滑动和淡入淡出。语法是$(selector).stop(stopAll,goToEnd);,两个参数都是bool类型,都是可选参数且默认为false,对于stopAll参数,如果是false,就会只停下正在活动的动画,如果是true,就会将整个当前动画队列的动画全部停止。goToEnd规定是否立即完成动画,false显然是不完成,而true是完成。

动画可能会带来的问题

由于JavaScript语句是自顶向下逐行执行的,动画之后的语句可能会产生一些错误或者页面冲突,原因是动画还未完成。为了避免这个情况,使用callback函数是必要的。callback函数只会在动画加载完全的时候才会被调用。比如说我现在要hide一个块,它会在hide之后alert一条提示语,不使用callback的话,这个代码看起来似乎是没问题的。

1
2
3
4

$("p").hide(1000);
alert("The paragraph is now hidden");

由于逐行进行,第一行执行后,系统会慢慢执行动画,此时代码已经走到了下一行,这个速度是要比动画快的,所以就会导致在隐藏动作还没做完的时候提示语就弹出来了。这时callback函数就起到了作用。

1
2
3
4
5

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery动画连锁

英文原词叫做jQuery Chaining,w3school给出的翻译是jQuery方法链接,嗯可能因为我游戏王玩多了可能感觉翻译成连锁更好一些吧。这个技术好在我们可以在相同的元素上依次连锁运行多条命令,一条接一条,中间用点号隔开。like this:$("#p1").css("color","red").slideUp(2000).slideDown(2000);

它会一次执行这三条动画命令。不过仔细一想,如果连锁特别长,这一行代码有可能会变得特别难看。不过JavaScript不严格的代码格式检查允许折行写。

比如你可以这么写。

1
2
3
4
5

$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

值得注意

后续有jQuery HTML 和jQuery遍历,先暂时仅作了解,大概下周或者本周的另一个时间会学。ajax还在计划中。

jQuery的基础与动画控制部分就暂且到此为止。战线拉的有点长,其实学习时间应该是可以缩短的,感觉自己有点放水。ajax应该还要抽出一点时间去看看吧。

滚去看有机了。。。。


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:jQuery学习笔记4——简单动画2

文章作者:Shawn Zhou

发布时间:2019年04月18日 - 09:04

最后更新:2019年04月28日 - 20:04

原始链接:http://shawnzhou.xyz/2019/04/18/19-04-18-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%