                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ)課程

animate 運(yùn)動(dòng)時(shí)，須動(dòng)畫(huà)1和動(dòng)畫(huà)2中，left加完后，才開(kāi)始動(dòng)畫(huà)1中的width 和 height 的變化，然后是動(dòng)畫(huà)2的width和height的變化

?? <head>
??????? <title>制作移動(dòng)位置的動(dòng)畫(huà)</title>
??????? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
??????? <link href="style.css" rel="stylesheet" type="text/css" />
??? </head>
?? ?
??? <body>
??????? <h3>制作移動(dòng)位置的動(dòng)畫(huà)</h3>
??????? <span></span>
??????? <div id="tip"></div>
?????? ?
??????? <script type="text/javascript">
??????????? $(function () {
??????????????? $("span").animate({
??????????????????? left: "+=100px"
??????????????? }, 2000, function () {
??????????????????? $("span").animate({
??????????????????????? height: '+=30px',
??????????????????????? width: '+=30px'
??????????????????? }, 2000, function () {
??????????????????????? $("#tip").html("執(zhí)行1完成!");
??????????????????? });
??????????????? });
??????????????? $("span").animate({
??????????????????? left: "+=100px"
??????????????? }, 5000, function () {
??????????????????? $("span").animate({
??????????????????????? height: '+=30px',
??????????????????????? width: '+=30px'
??????????????????? }, 5000, function () {
??????????????????????? $("#tip").html("執(zhí)行2完成!");
??????????????????? });
??????????????? })
??????????? });
??????? </script>
??? </body>
</html>

animate 運(yùn)動(dòng)時(shí)，須動(dòng)畫(huà)1和動(dòng)畫(huà)2中，left加完后，才開(kāi)始動(dòng)畫(huà)1中的width 和 height? 的變化，然后是動(dòng)畫(huà)2的width和height的變化，為什么不是是先執(zhí)行完動(dòng)畫(huà)1的整個(gè)動(dòng)畫(huà)效果在執(zhí)行動(dòng)畫(huà)2的left變化和width，height的變化？

裸奔的蘿卜絲

2016-04-08

源自：jQuery基礎(chǔ)課程 7-9

關(guān)注問(wèn)題我要回答

462

操作

收起

6 回答

月凝殘秋
2016-04-24

JS運(yùn)行在瀏覽器中，是單線程的，javascript引擎是單線程處理它的任務(wù)隊(duì)列，你可以理解成就是普通函數(shù)和回調(diào)函數(shù)構(gòu)成的隊(duì)列,在某個(gè)特定的時(shí)刻只有特定的代碼能夠被執(zhí)行。而瀏覽器是事件驅(qū)動(dòng)的，瀏覽器中很多行為是異步的，會(huì)創(chuàng)建事件并放入執(zhí)行隊(duì)列中。

當(dāng)?shù)谝粋€(gè)SPAN動(dòng)畫(huà)事件正要執(zhí)行時(shí)，第二個(gè)SPAN動(dòng)畫(huà)事件進(jìn)入執(zhí)行隊(duì)列（瀏覽器異步行為）。第一個(gè)SPAN動(dòng)畫(huà)事件執(zhí)行結(jié)束后會(huì)執(zhí)行第二個(gè)SPAN動(dòng)畫(huà)事件。

上面說(shuō)了回調(diào)函數(shù)也是要進(jìn)任務(wù)隊(duì)列的，此時(shí)的第一個(gè)SPAN動(dòng)畫(huà)事件的第一個(gè)回調(diào)事件進(jìn)入任務(wù)隊(duì)列，在它之后第二個(gè)SPAN動(dòng)畫(huà)事件的第一個(gè)回調(diào)事件進(jìn)入任務(wù)隊(duì)列。如此類推。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

月凝殘秋

再補(bǔ)充一句：函數(shù)表達(dá)式必須等到Javascirtp引擎執(zhí)行到它所在行時(shí)，才會(huì)從上而下一行一行地解析函數(shù)表達(dá)式，所以當(dāng)?shù)诙€(gè)事件SPAN正在隊(duì)列里的時(shí)候未執(zhí)行，所以在隊(duì)列里它的后面跟著是第一次SPAN事件的回調(diào)事件（寬高改變動(dòng)畫(huà)事件）。