animate() 和 fadeIn() 无法按预期工作答案

【问题标题】：animate() and fadeIn() not working as desiredanimate() 和 fadeIn() 无法按预期工作
【发布时间】：2014-08-03 18:01:46
【问题描述】：

我希望第三个 div 在它淡入时移动到第三个 div 内，但是，因为它的位置是绝对的，所以它的位置是正确的。请为这个问题提出一个解决方案。我还想要同时的淡入淡出和动画效果，但代码没有按预期工作。请帮忙！

<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'});
    });
});

【问题讨论】：

标签： jquery css web jquery-animate fadein

【解决方案1】：

你可以做到这一点，

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

由于您在同一个元素上使用动画，第二个动画将被排队，因此您不能同时运行这两个动画。

【讨论】：

【解决方案2】：

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

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

jQuery:

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

这是一个带有我修改过的代码的 jsFiddle

http://jsfiddle.net/Wrx2k/

另外，只是一个小指针，你的 position: absolute 在 CSS 样式中有一个错字。此外，尽量避免同时使用样式表和内联 CSS 来实现可管理的样式。

【讨论】：