在按下按鈕時爲屏幕上的div設置動畫

我對編碼感興趣，希望有人能夠幫助我解決我絕望的代碼技巧。我正在嘗試創建一個可以在按下按鈕時在屏幕上和屏幕外動畫的div。以下是我這麼遠....它可能是愚蠢錯誤的，但我想這就是這個網站是爲..在這裏你去在按下按鈕時爲屏幕上的div設置動畫

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
    <div id="test">Example Text</div> 
<script> 
function myFunction() 
{ 
    var position = test.position(); 
    if("#test".position<0) 
    { 
    alert("hello"); 
    $("#test").animate({ 
    "left": 0 
    },1000); 
}else{ 
    $("#test").animate({ 
    "left": -15 
    },1000); 
}); 
} 
</script> 



</body> 
</html>

點擊圖像時會調用此函數。我的想法是基本上告訴div在屏幕上動畫，如果它的位置值小於0，我認爲它告訴它它離開屏幕。如果它沒有檢測到它的值是離屏的，這意味着div現在在屏幕上，所以它應該動起來。我非常感謝任何人都可以提供的幫助。首先十分感謝！

來源

2013-02-05 user2021641

首先，你應該學會使用JavaScript錯誤控制檯看到拋出的腳本任何錯誤消息。在很多瀏覽器中都是F12。其次，最明顯的錯誤是你沒有包含jQuery，'test'沒有在任何地方定義，'if（「#test」.position <0）'應該是if（$（「#test」）。位置<0）'（或可能只是「如果（位置<0）」）。而你只是定義'myFunction（）'，但從不在任何地方調用它。 – JJJ

我看到您嘗試使用jQuery，但您沒有將該庫包含在HTML文件中。 –

嘿，夥計們。我沒有包含JQuery，因爲我在JSFiddle上運行這個...我想我應該說.. – user2021641

你在這裏。

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
<div id="test">TESTTEST</div> 
<input type="button" name="myButton" value="Click Me" onclick="myFunction()" /> 
<script>  
function myFunction() 
{ 
var divPosition = $("#test").offset(); 
if(divPosition.left < 0) 
{ 
$("#test").animate({ 
"left": 0 
},1000); 
}else{ 
$("#test").animate({ 
"left": -150 
},1000); 
}; 
} 
</script> 
</body> 
</html>

和CSS：

#test{ 
    background-color:white; 
    border:3px solid black; 
    font-size:30px; 
    position:absolute; 
    left:-20%; 
    top:10%; 
}

工作小提琴：http://jsfiddle.net/KeE4h/48/

來源

2013-02-05 13:44:00

非常感謝你抽出時間超出你的一天來幫助我。我真的很感激它。 – user2021641

任何時候都不是問題。這就是爲什麼我們在這裏。老實說，當我第一次開始編程時，我犯了比這更糟糕的錯誤。堅持並努力工作。並繼續回來尋求幫助：0） –

在按下按鈕時爲屏幕上的div設置動畫

回答

相關問題