JQuery GIF Animations

Question

I want to use jQuery to remove the need to use GIFs to create fairly simple animations.

I want the image to consist of four stages. 1) Do not show anything 2) The first part of the image 3) The second part of the image 4) The third part of the image - Start over

I thought I needed to create image stages and then use "replace current image with next" using jQuery to create the animation. This can be pretty easy with callbacks.

The next part should be for this animation to appear in several places after the previous animation has finished loading. Once again, it can be easy with callbacks.

I thought about that. Isn't it silly to use GIFs? Or can this be done using jQuery?

Answer 1

It is much simpler and supports chain ability:

JQuery

$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

Markup:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/jquery.rotator.js"></script>

<style type="text/css">
#slideshow {
    position:absolute; //or whatever you need
    display:block;
    top:0px;
    left:0px;
}
#slideshow img {
    position:absolute;
    opacity:0;
}
</style>

<!-- SLIDESHOW -->
<div id="slideshow">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>

Plugin:

(function( $ ){
    $.fn.rotator = function(delay, child){
        //set curImage val
        var currImg = 0;
        var currIt = true;
        //set array of images
        var ss = $('#slideshow').children(child);
        var ssize = ss.size();
        setInterval(function() {
            if(currIt){
                $(ss[currImg]).css('opacity','1');
                currIt = !currIt;
            }else if (!currIt){
                $(ss[currImg]).css('opacity','0');
                $(ss[currImg+1]).css('opacity','1');
                currIt = !currIt;
                currImg++;
            }
            //reset
            if(currImg >= ssize){
                currImg = 0;
                $(ss[currImg]).css('opacity','1');
            }
        }, delay);
        return this;
    };
})(jQuery);

Answer 2

Check this page for a demo for background animation with jquery and this for your guide.

Sinan.

Answer 3

div,

css_background-position

div, , .

Answer 4

GIF , . , JQuery, .

, , , JQuery/CSS, . , - ? GIF . , - Power Point? ...

Answer 5

, , gif.

, , -, , , , , jQuery, , .

, ( , ). "" jQuery .

( ):

function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  // blank after 2 seconds
    setTimeout(chg2, 4000);  // img 1 after 4 seconds
    setTimeout(chg3, 6000);  // img 2 after 6 seconds
    setTimeout(chg4, 8000);  // img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  // start again after 8 seconds
}

StartAnimation();  // start it off

Answer 6

(1 , )? 4 .

, , Damovisa, , "" css . (, , ), , , , .

, jQuery, .