如何使用 jQuery 函数启动图像淡出和淡入

Question

我的 Asp.Net MasterPage 中有一个小的 jQuery 函数，可以在 3 秒后淡出图像。它工作正常，但我很难让它淡入淡出。我已经尝试了几件事，因为我是使用 jQuery 的新手，我知道我正在做或不做一些事情。我不能把手指放在它上面。这是我所拥有的：

 <script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script> 
 <script type="text/javascript">
    $(document).ready(function (){
        setTimeout(function (){
            $('#Image1').fadeOut('slow', function(){
                $('#Image1').remove();
            }); 
        }, 3000);

    });

    var fadeBack = function () {
        $('#Image1').fadeIn();
    };

    fadeBack();
</script>

就像我说的，它会淡出没有问题，但我找不到合适的代码结构来将它带回来。我在想也许需要一个关于不透明度的 If 语句块？

真正的诀窍是，我想要在 3 个框中替换图像，如下所示：

我总共有大约 12 张图片，只是希望它们淡出一张图片，然后再引入另一张。更具体地说，我的意思如下：

第 (1) 列：Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn() 等。 所以现在，我只需要关于如何在第一列中执行此操作的帮助，我会看看是否可以将一些东西串在一起以使其他第 2 列和第 3 列跟进。每个时间为 3 秒。

最后，我可以使用一个数组来存储不在第一列框中的其他图像并将它们调用到幻灯片淡入淡出序列中吗？感谢您对这些知识的帮助，因此我可以牢记这一点。谢谢。

Answer 1

您的fadeBack() 立即启动，而fadeOut 有 3 秒延迟。为您的fadeBack 设置一个计时器，时间超过 3 秒，就会出现 img。

Answer 2

有一个函数$('#Image1').remove(); 应用了。这意味着一旦淡出，html块将被删除。然后你不能访问该对象。因为淡入淡出访问相同的 id #Image1。所以评论这一行。它可能会起作用。

Answer 3

使用此代码，它将在 3 秒后隐藏图像，并在 1 秒后将图像显示回来。

  $(document).ready(function (){
    setTimeout(function (){
        $('#Image1').fadeOut('slow'); 
    }, 3000);
    setTimeout(function (){
        $('#Image1').fadeIn('slow'); 
    }, 4000);
});

如果您想要幻灯片，请使用此代码

  <div class="yourimg_container">
     <img  src="http://localhost/app/img/off.png" id="Image1"/>
  </div>
  /* make an array containing your images path (you can fetch images from database   using asp.net/php query)*/

   var ss=  ["http://localhost/app/img/off.png",
           "http://localhost/app/img/on.png",
           "http://localhost/app/img/slider.png"];


  window.setInterval(function(){
      slideshow();
    }, 3000);

  function slideshow(){
    var im=$("#Image1").attr("src");

    for(i=0;i<ss.length;i++){

        if(ss[i]==im){
            if(i==ss.length-1) $('#Image1').attr("src",ss[0]);  
            else $('#Image1').attr("src",ss[i+1]);  
        }
    } 

  }

此外，您还可以使用类似这样的其他效果

  function slideshow(){
    var im=$("#Image1").attr("src");

    for(i=0;i<ss.length;i++){

        if(ss[i]==im){
            if(i==ss.length-1) {

                $('#Image1').fadeOut(500);  
                $('#Image1').attr("src",ss[0]); 
                $('#Image1').fadeIn(700);   
            }
            else {
                $('#Image1').fadeOut(500);  
                $('#Image1').attr("src",ss[i+1]);   
                $('#Image1').fadeIn(700);   
            }
        }
      } 
    }