0

我正在尝试使用 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>

编辑

在得到建议后，我进行了修改。我使用了隐藏，但它仍然没有隐藏。

<!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>
4

2 回答 2

1

起初它们是一起显示的，因为没有任何文字可以使它们隐藏起来。Yuo 可以为它们添加“display:none”样式，如果你想让它们显示/隐藏一个，或者你可以改变你的脚本来隐藏（）所有它们，没有任何延迟，然后添加你原始代码。
您也不需要 2 个不同的 css 类，因为它们无论如何都不会影响图像

于 2012-05-19T07:19:21.177 回答
1

您对所有这些img标签使用相同的图像，我假设您正在尝试创建图像 flickr 效果。为此，您可以按照本教程进行操作。

如果您希望代码同步运行，那么您必须show/hide像这样将每个代码插入另一个的完整回调中

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

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

如果我没记错的话，这是解决您问题的可能方法

工作演示

于 2012-05-19T07:22:55.877 回答