Question

我希望第三个div在第三个div内移动，但是，因为它的位置是绝对的，所以它正确定位。请为此问题提出解决方案。我也想要同时使用fadeIn和animate效果，但代码无法正常工作。请帮忙！

<html>
 <head>
    <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="animation.js"></script>
<link rel="stylesheet" type="text/css" href="req.css">
 </head>
 <body>
 <div class="one"><button class="b">Click Me!</button></div>
 <div class="two"></div>
 <div class="three">
    <div class="three1 anim" style="position:absolute;"></div>
        <div class="three2 anim"></div>
        <div class="three3 anim"></div>
 </div>
 </body>
 </html>

jquery和css代码如下：

one{
    height: 100%;
width: 400px;
background: rgb(241, 196, 15);
float:left;
}
.two{
height: 100%;
width: 400px;
background: rgb(230, 126, 34);
float:left;
}
.three{
height: 100%;
width: 400px;
background: rgb(231, 76, 60);
float:left;
}
.three1{
height: 100px;
width: 350px;
margin-left: 25px;
margin-right: 25px;
margin-top:15px;
background: rgb(26, 188, 156);
float:left;
postion:absolute;
display:none;
}
.three2{
height: 100px;
width: 350px;
margin-left: 25px;
margin-right: 25px;
margin-top:15px;
background: rgb(46, 204, 113);
float:left;
postion:absolute;
display:none;
}
.three3{
height: 100px;
width: 350px;
margin-left: 25px;
margin-right: 25px;
margin-top:15px;
background: rgb(52, 152, 219);
float:left;
postion:absolute;
display:none;
}

JQuery的：

$(document).ready(function(){
    $('.b').click(function(){
        $('.anim').fadeIn(2000);
    $('.anim').animate({left:'100px'});
    });
});

Answer 1

您可以通过

实现这一目标

$('.anim').animate({'opacity':1,'left':'100px'},2000);

由于您在同一元素上使用动画，因此第二个元素将排队，因此您无法同时运行两者。

Answer 2

fadeIn和animate不会同时运行，它们会排队。如果我从头开始编写，我不会这样做，但调整代码的最简单方法是：

摆脱css
将其换成不透明度：0
然后将您的jQuery调整为如下所示

jQuery的：

$('.anim').animate({left:'100px', opacity: '1'},2000);

这是我修改了代码的jsFiddle

http://jsfiddle.net/Wrx2k/

另外，只是一个小指针，你的位置：CSS样式中的绝对有一个错字。另外，尽量避免同时使用样式表和内联CSS来管理可管理的样式。

animate（）和fadeIn（）无法正常工作

2 个答案: