Animace – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Dobrý den, chci se poptat... Chci nastavit gif tak aby se po určité době zastavil. 

 takto mám načtenou animaci gif. Je to pozadí buňky v tabulce(td). Všem moc děkuji za pomoc

#select{
        background-image: url('animace.gif');
}

#1 asija
Tatko google vravi, ze tu mas odpoved:
http://stackoverflow.com/questions/19171075/how-to-stop-an-animated-gif-from-looping

A ide sa na to takto:
http://bit.ly/1gBjvFu

ano toto jsem našel.... jenže já neumím s js a obrázek mám načtený jako background-image... takže toto 
$('#img1').attr('src',$('#img1').attr('src')) nefunguje.

#3 asija
Nijaky iny sposob ako zastavit animaciu v gife nexistuje. Animacia prebieha priamo v obrazku a o jeho renderovanie sa stara browser. Neviem o nicom, ako by si mohol vstupit do obrazku a jednoducho zastavit jeho animaciu.

A uz vobec nie bez javascriptu.

No a když jsem nastavil aby se přehrála jen jednou. a chci nastavit aby po kliku na odkaz se spustila znovu... to by šlo ? Že by se třeba refreshnul css. 

To asi nepujde. Mozna prepsat tu konkretni css definici. Ale na to musis stejne pouzit js. Ja bych to resil dvema zpusoby.
- Bud bych vymenil src obrazku za gif bez animace.
- A nebo bych pouzil skryvani IMG, mozna pres visibility nebo display, kde v prvku nad img by bylo nastavene background-image bez animace.
<img src="a.gif" onclick="this.src='b.gif';">

#5 asija
A kde si to nastavil? V gife? Necitas pozorne?

Riadit prehravanie gifu v browseri NEJDE!

Vytvor si 2 obrazky, 1 animovany a 1 staticky. Najprv zobraz animovany, potom po uplynuti casu ho nahrad tym statickym. 

Po kliknuti na odkaz zase nahrad obrazok animovanym.

Samozrejme, tys to chtel puvodne zastavit po urcite dobe, tak se da spustit pomoci onload udalosti SetInterval a nastavit funkci, co se ma udelat a po jake dobe. Pouziti tech funkci je napr na
http://www.jakpsatweb.cz/…asovani.html
http://www.jakpsatweb.cz/…y/index.html
Příklad časování a zrušení časování

Tak tak, ako pise Peter. 

Mozno by stacilo aj nieco taketo: (prepokladam, ze mas nejaky button a chces mat v nom ikonu?)

HTML:

<a href="#" id="button" class="anim">Linka</a>

CSS:

#button {
  display: block;
  height: 30px; // vyska obrazku + okraj
  line-height: 30px;
  padding-left: 30px; // sirka obrazku + okraj
}
.anim {
  background: url(anim.gif) no-repeat left top;
}
.noanim {
  background: url(noanim.gif) no-repeat left top;
}

javascript (jQuery):

$(document).ready(function() {
  setTimeout(function(){
    $("#button").removeClass(".anim").addClass(".noanim");
  },3000);
  $("#button").on("click", function(e) {
    $("#button").removeClass(".noanim").addClass(".anim");
  });
});

Snad by ti to mohlo fungovat. Ostatne si uz musis dojest sam ;)