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

為什么不能同時(shí)用left：“+=50px”和right：“”+=50px

使用animate()方法進(jìn)行動(dòng)畫，為什么不能同時(shí)用left：“+=50px”和right：“”+=50px；

同時(shí)用的話，會(huì)存在問題：

<!DOCTYPE html>

<html>

? ? <head>

? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

? ? ? ? <title>jQuery動(dòng)畫特效</title>

? ? ? ? <style type="text/css">

#block{

position: relative;

width: 50px;

height: 50px;

background-color: red;

margin:10px;

}

? ? ? ? </style>

? ? ? ? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

? ? </head>

? ??

? ? <body>

? ? ? ? <div id="block"></div>

? ? ? ? <form action="#">

? ? ? ? <input type="button" value="左移" />

? ? ? ? <input type="button" value="右移" />

? ? ? ? </form>

? ? ? ? <script type="text/javascript">

? ? ? ? $(function(){

? ? ? ? $("input[value='左移']").bind('click',function(){

? ? ? ? $("#block").animate({right:"+=50px"},500);

? ? ? ? });

? ? ? ? $("input[value='右移']").bind('click',function(){

? ? ? ? // $("#block").animate({left:"+=50px"},500); ?這里改變left的屬性為什么存在問題？

? ? ? ? $("#block").animate({right:"-=50px"},500);?

? ? ? ? });

? ? ? ? </script>

? ? </body>

</html>

Eason_Mar

2016-04-10

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

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

696

操作

收起

5 回答

半聾半啞半糊涂
2016-05-17

如果這樣寫，你往右走了，在想往左，就不會(huì)從當(dāng)前的位置移動(dòng)了，而是會(huì)從初始值移動(dòng)

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

收起回答

仁太
2016-04-12

我試了兩次 ?都可以的啊 ? 這個(gè)不是同時(shí)左右移 ?是點(diǎn)擊按鈕觸發(fā) ?按鈕是左移就坐 ?沒有什么沖突的 ?

你的錯(cuò)誤提示是什么?

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

收起回答

#1

Eason_Mar 提問者

$("input[value='左移']").bind('click',function(){ $("#block").animate({right:"+=50px"},500); }); $("input[value='右移']").bind('click',function(){ $("#block").animate({left:"+=50px"},500); 你確認(rèn)你使用的是這個(gè)寫法？我遇到的問題是：右移之后就無(wú)法左移了！

2016-04-12 回復(fù) 有任何疑惑可以回復(fù)我~

#2

Eason_Mar 提問者

我的代碼目前是OK的，但是如果你替換了這兩句，就有問題了： $("#block").animate({left:"+=50px"},500); 這句有問題; $("#block").animate({right:"-=50px"},500); 這句沒問題;

2016-04-12 回復(fù) 有任何疑惑可以回復(fù)我~

#3

仁太回復(fù) Eason_Mar 提問者

試出來了這個(gè)把left或者right都改成同一個(gè) 然后用-=和+=能實(shí)現(xiàn) 你試試你的代碼先點(diǎn)左移多點(diǎn)幾下然后點(diǎn)一下右移會(huì)發(fā)現(xiàn)動(dòng)畫會(huì)直接從初始位置開始右移不是從你左移后的位置開始右移的這個(gè)應(yīng)該和animate這個(gè)自身源碼的設(shè)置有關(guān) 里面應(yīng)該有定位的問題所以導(dǎo)致的設(shè)置不同屬性改變會(huì)不可用

2016-04-12 回復(fù) 有任何疑惑可以回復(fù)我~