效果能不能再優化一些

最后效果是飛來飛去的，能添加一個判斷行為、清除行為事件嗎

不是江南

2016-06-10

源自：帝堵搶車位動畫制作

關注問題我要回答

1570

操作

收起

1 回答

qq_啊啦嘞_0
2017-06-17

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>