jquery按鈕點擊並不像預期的那樣返回結果

我在jquery中有以下代碼。jquery按鈕點擊並不像預期的那樣返回結果

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#button1").click(function() { 
 
     alert(1) 
 
     var div = $("div"); 
 
     div.animate({ 
 
      left: '100px' 
 
     }, "slow"); 
 
     div.animate({ 
 
      fontSize: '3em' 
 
     }, "slow"); 
 
     }); 
 

 
     $("button").click(function() { 
 
     alert(3) 
 
     var div = $("div"); 
 
     div.animate({ 
 
      left: '50px' 
 
     }, "slow"); 
 
     div.animate({ 
 
      fontSize: '7em' 
 
     }, "slow"); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <button id="button2">Start Animation2</button> 
 
    <button id="button1">Start Animation</button> 
 
    <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
 
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> 
 
</body> 
 
</html>

當我運行的代碼，開始animation2按鈕首次但對於第二和點擊之後沒有影響運行。但

開始動畫

按鈕工作的每次點擊。我能理解那是因爲我已經寫了$（「＃Button1的」）。點擊（函數（）爲特定的按鈕。但是對於那些對

開始animation2

沒有效果的原因

多次點擊？

來源

2017-04-21 Tom Cruise

var div = $（「div」）;將選擇所有div元素並返回相同的數組。看看是否使它更具體（添加一個類或說div [0] .animate而不是div.animate）解決了這個問題。 –

你試圖產生什麼效果？你似乎對選擇器的工作方式感到困惑。 –

@KilianStinson動畫效果 –

問題是由於選擇，你已經把它貼事件#button1和button。因此，當#button1點擊都事件處理程序運行。當#button2點擊Ø nly綁定到button的事件處理程序運行。這似乎什麼都不做，因爲#button1的結束狀態將所有內容放在相同的位置 - 因此沒有任何移動。

來源

2017-04-21 07:59:40

爲什麼在第二次點擊div時不應用left：50px w.r.到當前位置？ –

這是因爲你將位置設置爲50px。如果你想每次點擊增加50px，使用'left：'+ = 50px'' –

好的。但瀏覽器將如何考慮：從當前位置或從初始位置開始放50px？ –

這是因爲

div.animate({ 
    left: '100px' 
}, "slow");`

將SET您left財產100px而不是增量它。它會設置一次，然後第二次，因爲它已經在100px之後沒有任何變化。

來源

2017-04-21 07:59:55

jquery按鈕點擊並不像預期的那樣返回結果

回答

相關問題