帝堵抢车位动画制作_技术问答

qq_Imymyself_0

我的运行一直动: 已采纳骑着蜗牛play 的回答; 是不是浏览器的问题？？试试goole浏览器看看; 2017-08-31 2回答·1459浏览

暮女神

不能用this?

已采纳 WEB丶FriEnD 的回答

你这里的this指的是document根节点。

如果你想要的效果是点击该文档页面中任意位置都能触发该动画事件的话，

应该是用 this.onclick=function(){ //事件 } - this JS对象

或者 this.click(function ... 改成 $(this).click(function ... - $(this) JQ对象

2017-07-02 2回答·1436浏览

玛丽小主3768487

滑动图跑到hover图后面要怎么调

我也不知道

2017-05-22 1回答·1453浏览

君丿

厉害了有没有: 已采纳田心枫的回答; 哈哈挺逗的; 2017-04-28 1回答·1311浏览

吕某某

click怎么不行: 明白了。少括号。; 2016-12-30 1回答·1493浏览

野生前端菜鸟

怎么解决再次单击回到原来的位置？

已采纳阳光明媚的早晨我迟到了的回答

$(document).ready(function(){
    $('.car').hover(function(){
        $('.car').stop(true)
        .animate({top:'0px'},{duration:1000})
    },function(){
        $('.car').stop(true)
        .animate({top:'500px'},{duration:1000})
    })     
});

2016-12-04 2回答·1589浏览

野生前端菜鸟

hover事件有缺陷怎么解决: buzhidao; 2016-12-04 1回答·1562浏览

dky

写的为什么不对: 已采纳慕粉3914370 的回答; 这里有jquery代码; 2016-12-02 1回答·1525浏览

慕娘5154066

停车图片

打开浏览器开发者模式定位一下就可以找到了

图片地址：

http://img.mukewang.com/5343d56b0001ccfb07200701.jpg

http://img.mukewang.com/5343d553000107a107200701.jpg

2016-11-14 1回答·1296浏览

蓝天__大海

不知道效果怎么不出来: 代码呢; 2016-08-03 1回答·1364浏览

Chaih橙子

怎么没有效果: animate({top:500}) 500没带单位“px”; 2016-08-03 3回答·1539浏览

好奇心害死人

有源代码吗: 已采纳 qq_救救我吧_1 的回答; 编辑器显示内容的右下角; 2016-07-19 2回答·1482浏览

不是江南

效果能不能再优化一些

1）将鼠标hover，改成click事件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抢车位动画效果制作</title>
<script src="jquery-1.11.1.js"></script>
<style>
.car-box {
position: relative;
width:720px;
height:701px;
}
/*.carport{*/
/*width:720px;*/
/*height:701px;*/
/*display: inline-block;*/
/*z-index:2;*/
/*}*/
.car{
position: absolute;
top:0;
left:720px;
}
</style>
</head>
<body>
<div class="car-box">
<img class='car' src="car.png"/>
<img class="carport" src="carport.png"/>

</div>
<script>
$(document).ready(function(){
$(".car").click(function() {
var left = $(this).css('left');
if (left == '720px') {
$(".car").animate({left: 0}, {duration: 300})
}else{
$(".car").animate({left:"720px"}, {duration: 300})
}
}
)
})
</script>
</body>
</html>