Javascript Jquery移动对象

我现在正在学习使用Javascript和jquery，有一个相当愚蠢的初学者问题。我练习的重点是创建四个同时移动的对象，但第一个对象应该在单击时改变大小，第三个对象应该在鼠标上改变颜色。这是我到目前为止所做的，似乎无法从这一点继续。 我真的很感谢你在这方面的帮助

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“div”）.animate({
左：“250px”
});
});
});

使有生气

















$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“.first”）.animate({
左：“250px”
});
});
$（“.third”）.mouseover（函数（）{
$（this.animate（）.css）({
背景颜色：'#000000'
});
})
$（“.fourth”）.mouseout（函数（）{
$（此）。设置动画({
宽度：300
})
});
});
div{
位置：相对位置；
宽度：100px；
高度：100px；
边缘底部：20px；
}

使有生气

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“.first”）.animate({
左：“250px”
});
});
$（“.third”）.mouseover（函数（）{
$（this.animate（）.css）({
背景颜色：'#000000'
});
})
$（“.fourth”）.mouseout（函数（）{
$（此）。设置动画({
宽度：300
})
});
});
div{
位置：相对位置；
宽度：100px；
高度：100px；
边缘底部：20px；
}

使有生气
您必须定位div，以便使用
left
属性或使用
marginLeft
而不是
left
，并且您没有正确关闭
html
div
标记

试试这个

HTML

<button>Animate</button>
<br>
<br>
<br>
<div class="first">
<div style="background:#98bf21;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="second">
<div style="background:#d80000;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="third">
<div style="background:#038ef0;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="fourth">
<div style="background:#ffc50d;height:100px;width:100px;">
</div></div>

CSS

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: 250}, 1000);
    });
    // change border radius to make it a circle
    $("div.first").click(function(){
        $("div.first div").animate({borderRadius:"50%"});
    });
    // on mouse ove change background color and return at mouse out
    // but you can do this css hover simpler
    $("div.third").mouseover(function(){
        $("div.third div").css("background-color","black");
    }).mouseout(function() {
        $("div.third div").css("background-color","#038ef0");
       });
});

div{position:relative}

您必须定位div，以便使用
left
属性或使用
marginLeft
而不是
left
，并且您没有正确关闭
html
div
标记

试试这个

HTML

<button>Animate</button>
<br>
<br>
<br>
<div class="first">
<div style="background:#98bf21;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="second">
<div style="background:#d80000;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="third">
<div style="background:#038ef0;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="fourth">
<div style="background:#ffc50d;height:100px;width:100px;">
</div></div>

CSS

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: 250}, 1000);
    });
    // change border radius to make it a circle
    $("div.first").click(function(){
        $("div.first div").animate({borderRadius:"50%"});
    });
    // on mouse ove change background color and return at mouse out
    // but you can do this css hover simpler
    $("div.third").mouseover(function(){
        $("div.third div").css("background-color","black");
    }).mouseout(function() {
        $("div.third div").css("background-color","#038ef0");
       });
});

div{position:relative}

您的HTML似乎不完整。您是否有意嵌套了
div
元素？动画不起作用的原因是，您需要使divs
position:absolute
使
left
样式生效。首先，关闭
的
标记，使HTML看起来不完整。您是否有意嵌套了
div
元素？动画不起作用的原因是您需要使divs
位置：绝对
使
左侧
样式生效首先关闭
的
标记非常感谢！你帮我弄明白了。干杯非常感谢你！你帮我弄明白了。干杯