Javescript jQuery的動畫不工作

我真的不知道什麼是與動畫，其只是生命的問題，因爲我試圖檢查的作品以及所有其他效果：Javescript jQuery的動畫不工作

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
    $("#box1").animate({left: '250px'}); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <title>Title</title> 
 
    <style> 
 
     .box{ 
 
     border: 2px solid black; 
 
     width:100px; 
 
     height: 100px; 
 
     display: inline-block; 
 
     padding: 20px; 
 
     margin: 5px; 
 
     } 
 

 
     p{ 
 
     font-family: Arial; 
 
     color: aquamarine; 
 
     font-size: 30px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1 id="he"><center>New website</center></h1> 
 
    <p id="pp">Hey what's up?</p> 
 
    <button id="butt">click here</button> 
 
    <div id="box1" class="box">box9</div> 
 

 
    </body> 
 
</html>

來源

2016-09-07 Niv

你還沒有爲你的＃box1定義任何'位置'屬性' – vivekkupadhyay

試試這個：

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#box1").animate({"left": "250px"}); 
    }); 
});

來源

2016-09-07 09:49:41 utdev

分給box的位置，它會工作。下面

代碼：

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $("#box1").animate({ 
 
     left: '250px' 
 
    }); 
 
    }); 
 
});

.box { 
 
    position: relative; 
 
    border: 2px solid black; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    padding: 20px; 
 
    margin: 5px; 
 
} 
 
p { 
 
    font-family: Arial; 
 
    color: aquamarine; 
 
    font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<h1 id="he"><center>New website</center></h1> 
 
<p id="pp">Hey what's up?</p> 
 
<button id="butt">click here</button> 
 
<div id="box1" class="box">box9</div>

來源

2016-09-07 09:50:23 kukkuz

** + 1 ** @Ish是它的作品，當我給它的位置.. 但爲什麼呢？ – Niv

因爲如果你沒有將位置定義爲'relative/fixed/absolute'，那麼'left/right/bottom/top'屬性與* DOM *元素的位置有關，那麼它們對它沒有任何影響有點不值得聲明。 – vivekkupadhyay

'left'僅適用於「定位」元素，即，如果位置不是「靜態」（這是默認的方式） – kukkuz

試試這個：

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#box1").animate({'left': '250px','position':"absolute"}); 
    }); 
});

來源

2016-09-07 09:52:25 Ish

動畫使它誤。首先你可以指定位置。 div盒應該是絕對位置的。那麼左邊的值應該是0.

這裏的css代碼：

.box{ 
     border: 2px solid black; 
     width:100px; 
     height: 100px; 
     display: inline-block; 
     padding: 20px; 
     margin: 5px; 
     position:absolute; 
     left:0; 
    }

現在你嘗試它將動畫。

來源

2016-09-07 09:53:20 bala

Javescript jQuery的動畫不工作

回答

相關問題