Fatal编程技术网

Javascript fadein和fadeout jquery

javascript jquery

Javascript fadein和fadeout jquery,javascript,jquery,Javascript,Jquery,我有以下代码： <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <script> $(function() { function animation() { $('#img0').attr(

我有以下代码：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script>
$(function()
{
    function animation()
    {
        $('#img0').attr('src',$('#img1').attr('src')).fadeOut(4000).attr('src',$('#img2').attr('src')).fadeIn(4000).fadeOut(4000).attr('src',$('#img3').attr('src')).fadeIn(4000).fadeOut(4000) ;
        animation();
    }
});
</script>

<body>
<img  id="img0" width="613" height="260" alt="OffLease Only Lot" />
<img src="static/images/home/slides/SLIDERS-mP.jpg" id="img1" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/slider_usa.jpg" id="img2"  width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/SLIDERS-ODOMETER.jpg"  id="img3"  width="613" height="260" alt="OffLease Only Lot" hidden="true" />

</body>
</html>


$（函数（）
{
函数动画（）
{
$（'img0'）.attr（'src'，$（'img1'）.attr（'src'））.fadeOut（4000）.attr（'src'，$（'img2'）.attr（'src'））.fadeIn（4000）.fadeOut（4000）.attr（'src'，$（'img3'）.attr（'src'）.fadeIn（4000）.fadeOut（4000）；
动画（）；
}
});
我希望幻灯片通过更改图像源来显示图像，并继续显示和消失图像。
但我的代码不起作用

  • 为什么?
  • 我怎样才能修好它
您必须等待动画像这样首先完成

element$.fadeOut(4000, function () {

  // Do something when faded out

  element$.fadeIn(4000, function () {

    // Do something when faded in

  });
});
如果要循环这三幅图像，请执行以下操作：

function animate1() {
    $('#img1').fadeIn(4000, function() {
        $('#img1').fadeOut(4000, animate2);
    })
}

function animate2() {
    // Do the same thing here, and do animate3 too
}

$(function() { $('#img0').fadeOut(4000, animate1) };
我还将花一分钟浏览jQuery淡出和淡出页面。我认为他们不像你想象的那样工作

JsFiddle它。首先-问问自己在哪里/如何启动
animation（）
函数？我所看到的是，您已经定义了函数
animite（）
。在这个函数中，我看到了递归，所以
animation（）
将触发
animation（）
，然后
animation（）
将触发
animation（）
，等等……你已经将盒子的钥匙放在盒子里并锁定了它。另外，我不确定你的盒子是我见过的最好的盒子。谢谢你的回复！！！！！！！！！！！！！我用
$（function（）{$（'src'，$（'img1'）.attr（'src'））.attr（'src'））.fadeOut（4000，function（）{console.log（“hi”）}.attr（'src'，$（'img2'）.attr（'src'））.fadeIn（4000）.fadeOut（4000，function（）{console.log（“hi”）.log”）.attr（'src'），$（'img3'）.attr（'img2'）.attr（'src'））.fadeOut（'src'））.fadeut（'src'））.log（））.fadeut（'4000.）.log（））.fadeOut（'hi console'）但相同的结果被替换为：
$（function（）{$（'#img0'）.fadeOut（4000，animate1）；}）；（3）由于上述原因，以及（3）img1'。attr（'src'，#img1'）.attr（'src'）.attr（'src'））..fadeIn（4000）褪色（4000）褪色（4000）褪色（4000）褪色（4000）、褪色（4000）以及衰减（4000，动画（4000，动画2（））第二次（4000）脱掉（4000）第（4000）、第二次（4000，动画（4000，动画（4000，动画（4000，动画（4000，动画2（））第二（4000，动画）以及第二（4000，4万名）、第二（4000，动画（4000，动画（4000，动画（）））；；）以及第二（4000）以及第二个）以及第二个）第二次）脱掉（4000）以及第二（4000）脱掉（4000）褪色（4000）以及第二（4000）以及第二（4000）以及第三（4000）第二个）以及第二个）第二次}
但是会记录此错误
未捕获范围错误：超过最大调用堆栈大小