javascript - 如何使用 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 语句 block ？

真正的技巧是我想要在 3 个框中替换图像，如下所示:

我总共有大约 12 张图像，只想让它们淡出一张图像，然后引入另一张图像。更具体地说，我的意思如下:

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

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

Answer 1

使用此代码，它将在 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);   
            }
        }
      } 
    }