CODEWITHSUNDEEP
javascriptjqueryasp.netimage
DesignerMind
DesignerMind

Reputation: 410

How to Initiate Image Fade Out and Fade In with jQuery Function

I have a little jQuery function in my Asp.Net MasterPage that fades an image out after 3 seconds. It works fine, but I'm having difficulty getting it to fade back in. I've tried several things as I'm new using jQuery, and I know there's something I'm doing or not doing. I can't put my finger on it. Here's what I have:

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

Like I said, it fades out with no problem, but I cannot find the right code structure to bring it back in. I'm thinking maybe an If statement block about the opacity is needed?

The real trick is that I want alternate images in 3 boxes I have as seen here: Image Bar in Header

I have about 12 images total, and just want them to fade one image out, and bring another in. Being more specific, I mean the following:

Column (1): Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn(), and etc. So for now, I just need help with how to do this in Column One, and I'll see if can string something together to make the other Columns 2 and 3 follow up. The timing would be 3 second for each.

Lastly, could I use an array to store other images which aren't in the Column One box already and call them into the slideshow fade sequence? I appreciate you help for this knowledge, so I can lock this in mind. Thanks.

Upvotes: 0

Views: 1117

Answers (4)

Rusty Nail
Rusty Nail

Reputation: 2710

Here is a super simple implementation:

<img id="gallery" src="" alt="" width="185" class="">

try {
    var i = 0;
    var imagePaths = @Html.Raw(Json.Encode(@ViewBag.Images));
    var imageArray = imagePaths.split(',')

    setInterval(function () {
        $('#gallery').fadeOut(1000, function () {
            $('#gallery').attr("src", imageArray[i++]);
            $('#gallery').fadeIn(1000);
            if (i >= imageArray.length) { i = 0; }
        });
    }, 7000);
}
catch (err)
{
    alert(err);
}

Upvotes: 0

RN Kushwaha
RN Kushwaha

Reputation: 2136

Use this code, it will hide the image after 3 seconds and after that 1 sec, it will show image back.

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

if you want like a slideshow use this code

  <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]);  
        }
    } 

  }

additionally you can use other effects like this

  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);   
            }
        }
      } 
    }

Upvotes: 1

sugunan
sugunan

Reputation: 4456

There is a function $('#Image1').remove(); Applied. It mean once fade over, the html block will be removed. Then you can't access the object. Because fade in and fade out accessing same id #Image1. So comment the line. It may work.

Upvotes: 0

Stefan Ticu
Stefan Ticu

Reputation: 2103

Your fadeBack() is launched immediately whereas the fadeOut has 3 sec delay. Set a timer for your fadeBack grater than 3 sec and the img will appear.

Upvotes: 0

Related Questions