Question

我正在尝试使用jquery创建一个小的动画效果，其中图像显示然后一个接一个地隐藏。在我的代码中，所有图像一次显示然后逐个隐藏。请帮忙。感谢

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hide1").delay(2050).hide(1);
    $('.show1').delay(2000).show(1);
    $(".hide2").delay(2550).hide(1);
    $('.show2').delay(2500).show(1);
    $(".hide3").delay(2550).hide(1);
    $('.show3').delay(3000).show(1);
    $(".hide4").delay(3550).hide(1);
    $('.show4').delay(3500).show(1);
    $(".hide5").delay(4050).hide(1);
    $('.show5').delay(4000).show(1);

});
</script>
</head>

<body>
<img class="hide1" class="show1" style="position:absolute; top:300px; left:300px;" src="9.png" />
<img class="hide2" class="show2" style="position:absolute; top:260px; left:340px;" src="9.png" />
<img class="hide3" class="show3" style="position:absolute; top:220px; left:380px;" src="9.png" />
<img class="hide4" class="show4" style="position:absolute; top:180px; left:420px;" src="9.png" />
<img class="hide5" class="show5" style="position:absolute; top:140px; left:460px;" src="9.png" />
<img class="hide6" class="show6" style="position:absolute; top:100px; left:500px;" src="9.png" />

</body>
</html>

修改

获得建议后我做了修改。我使用过hide但它仍然没有隐藏。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hide1").delay(2050).hide(1);
    $('.show1').delay(2000).show(1);
    $(".hide2").delay(2550).hide(1);
    $('.show2').delay(2500).show(1);
    $(".hide3").delay(2550).hide(1);
    $('.show3').delay(3000).show(1);
    $(".hide4").delay(3550).hide(1);
    $('.show4').delay(3500).show(1);
    $(".hide5").delay(4050).hide(1);
    $('.show5').delay(4000).show(1);
    $('.noshow').hide(0);


});
</script>
</head>

<body>
<img class="noshow hide1 show1" style="position:absolute; top:300px; left:300px;" src="9.png" />
<img class="noshow hide2 show2 " style="position:absolute; top:260px; left:340px;" src="9.png" />
<img class="noshow hide3 show3 " style="position:absolute; top:220px; left:380px;" src="9.png" />
<img class="noshow hide4 show4 " style="position:absolute; top:180px; left:420px;" src="9.png" />
<img class="noshow hide5 show5 " style="position:absolute; top:140px; left:460px;" src="9.png" />
<img class="noshow hide6 show6 " style="position:absolute; top:100px; left:500px;" src="9.png" />

</body>
</html>

Answer 1

它们首先显示在一起，因为没有任何可写的内容会使它们隐藏起来。 Yuo可以为他们添加“display：none”样式，如果你想要他们做的是显示/隐藏一个再见，或者你可以改变你的脚本隐藏（）所有这些都没有任何延迟，然后添加你的原始代码。
你也不需要2个不同的css类，因为它们不会影响图像

Answer 2

您正在为所有img标记使用相同的图像，我假设您正在尝试创建图像flickr效果。为此，您可以按照tutorial。

进行操作

如果您希望代码同步运行，则必须将每个show/hide插入到另一个完整的回调中，如下所示

$(".hide1").delay(2050).hide(1,function(){
         $('.show1').delay(2000).show(1,function(){
              $(".hide2").delay(2550).hide(1);
        });
 });

这会创造一个非常大的链条而且不可取。检查http://www.mattbudd.co.uk/上面的教程输出。如果你想要这样的东西你可以按照教程。

如果我没有弄错的话，这是你问题的可能解决方案

Working Demo

显示和隐藏图像

修改

2 个答案: