CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3926729
user3926729

Reputation: 71

Add animation of my 2 images using fade in and/or fade out

<div id="figure">
<img name="slide">
<script type="text/javascript">
var step=1, timer; // declare timer
function slideit()
{
    if(timer){ // if there is any timer
     setTimeout(function(){
            clearTimeout(timer); // clearTimeout after 1 min (30000 ms)
     }, 30*1000);
    }
    document.images.slide.src = eval("image"+step+".src");
    if(step<2)
    step++;
    else
    step=1;
    timer = setTimeout("slideit()",5000); // assign a setTimeout to the timer.
}
slideit();
</script>

I am trying to learn javascript/jquery on how to add animation on my 2 images using the transition fade in and/or fade out.

Upvotes: 1

Views: 782

Answers (1)

Stoimen Iliev
Stoimen Iliev

Reputation: 182

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500);
});
</script>

As soon as the page is loaded, the jQuery .fadeIn() function fades in our first image in 1500 milliseconds (or, 1.5 seconds). The .delay() function acts as a counter and waits 3500 milliseconds (or, 3.5 seconds), then the .fadeOut() function fades it out in 1500 milliseconds (or, 1.5 seconds).

At the same time that the first image is doing its thing on page load, the .delay() function makes the second image wait 5 seconds before the .fadeIn()function fades it in in 1.5 seconds.

Upvotes: 3

Related Questions