为什么只有我的一些定向运动功能有效?
Why do only some of my directional movement functions work?
不知道有没有人能帮帮我。我还在学习 jQuery,我不明白为什么 "left" 和 "up" 按钮不起作用。它完美地下降和正确。这是我的代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#dolu").click(function(){
$("div").animate({
marginTop:"100px"
}, "slow");
});
});
$(document).ready(function(){
$("#desno").click(function(){
$("div").animate({
marginLeft:"100px"
}, "slow");
});
});
$(document).ready(function(){
$("#gore").click(function(){
$("div").animate({
marginBottom:"100px"
}, "slow");
});
});
$(document).ready(function(){
$("#levo").click(function(){
$("div").animate({
marginRight:"100px"
}, "slow");
});
});
</script>
</head>
<body>
<button id="gore">Up</button>
<button id="dolu">Down</button>
<button id="levo">Left</button>
<button id="desno">Right</button><br><br>
<div id="kocka" style="width:50px; height:50px; background-color:#D0D0D0; opacity:1"></div>
</body>
</html>
您正在设置对头寸没有影响的保证金。在有大量 space 的地方放置右边距对左侧位置没有任何作用。相反,将左边距改回来, 或 从现有的左边距中减去 100。
您将希望使用字符串值进行相对移动。也仅参考 marginTop
和 marginLeft
$(function() {
var k = $("div#kocka");
$("#dolu").click(function() {
k.animate({
marginTop: "+=100px"
}, "slow");
});
$("#desno").click(function() {
k.animate({
marginLeft: "+=100px"
}, "slow");
});
$("#gore").click(function() {
k.animate({
marginTop: "-=100px"
}, "slow");
});
$("#levo").click(function() {
k.animate({
marginLeft: "-=100px"
}, "slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="gore">Up</button>
<button id="dolu">Down</button>
<button id="levo">Left</button>
<button id="desno">Right</button><br><br>
<div id="kocka" style="width:50px; height:50px; background-color:#D0D0D0; opacity:1">
</div>
参考:Moving from position A to position B slowly with animation
不知道有没有人能帮帮我。我还在学习 jQuery,我不明白为什么 "left" 和 "up" 按钮不起作用。它完美地下降和正确。这是我的代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#dolu").click(function(){
$("div").animate({
marginTop:"100px"
}, "slow");
});
});
$(document).ready(function(){
$("#desno").click(function(){
$("div").animate({
marginLeft:"100px"
}, "slow");
});
});
$(document).ready(function(){
$("#gore").click(function(){
$("div").animate({
marginBottom:"100px"
}, "slow");
});
});
$(document).ready(function(){
$("#levo").click(function(){
$("div").animate({
marginRight:"100px"
}, "slow");
});
});
</script>
</head>
<body>
<button id="gore">Up</button>
<button id="dolu">Down</button>
<button id="levo">Left</button>
<button id="desno">Right</button><br><br>
<div id="kocka" style="width:50px; height:50px; background-color:#D0D0D0; opacity:1"></div>
</body>
</html>
您正在设置对头寸没有影响的保证金。在有大量 space 的地方放置右边距对左侧位置没有任何作用。相反,将左边距改回来, 或 从现有的左边距中减去 100。
您将希望使用字符串值进行相对移动。也仅参考 marginTop
和 marginLeft
$(function() {
var k = $("div#kocka");
$("#dolu").click(function() {
k.animate({
marginTop: "+=100px"
}, "slow");
});
$("#desno").click(function() {
k.animate({
marginLeft: "+=100px"
}, "slow");
});
$("#gore").click(function() {
k.animate({
marginTop: "-=100px"
}, "slow");
});
$("#levo").click(function() {
k.animate({
marginLeft: "-=100px"
}, "slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="gore">Up</button>
<button id="dolu">Down</button>
<button id="levo">Left</button>
<button id="desno">Right</button><br><br>
<div id="kocka" style="width:50px; height:50px; background-color:#D0D0D0; opacity:1">
</div>
参考:Moving from position A to position B slowly with animation