Question

我试图在网页上制作汽车图像动画。不透明度命令工作但不移动。我已将图像标记放在另一个大div中，以便为图像标记及其动画留出空间。

＆＃13;

<div class="blockone">
            <div class="row blockoneComingsoon">
                <h1 id="carmover" class="csoon">Click to see what we do</h1>
            </div>
            <div style="width:75%;margin:auto auto;top:10px" class="row">
                <div style="width:300px;margin:auto auto">
                    <img style="top:10px"id="car" src="/components/pg.blocks/images/car.png" width="300" class="carplace" />
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </body>
    <body>
        <div class="container">
</div>
        <script>
            $(document).ready(function(){
                $('#car').animate({opacity: '0.1'});
                
                $('#carmover').click(function(){
               
    			$('#car').animate({left:'100px',opacity: '1'});
       		 	
                });
    			
			});
		</script>

＆＃13;

Answer 1

你只需添加位置：相对于img，就这样

<img style="top:10px;position:relative"id="car" src="/components/pg.blocks/images/car.png" width="300" class="carplace" />

无论如何，代码中有一个标签正文在该位置无用

Answer 2

您可以使用.addClass（）...

.animate{
    left: 100px;
    opacity: 1;
    -webkit-transition: all 1s ease;
 }

 $('#carmover').click(function(){
     $('#car').addClass('animate');
 });

Jquery动画移动不起作用

2 个答案: