Ho le seguenti immagini:Cross-Browser Animated GIF al passaggio del mouse e inversa quando il mouse lascia
Static Image | Starting Animation | Ending Animation
e sto usando il seguente codice (jsfiddle example):
$(function() {
$("#link-gif").hover(
function() {
/* starting animation */
$(this).css("background-image", "url('http://i.imgur.com/HhsBws5.gif')");
},
function() {
/* ending animation */
$(this).css("background-image", "url('http://i.imgur.com/WLFzz3S.gif')");
}
);
});
#link-gif {
width:150px;
height:40px;
border:1px solid #39464E;
background-image:url('http://i.imgur.com/YgLJoVH.png'); /*static*/
background-size:contain;
background-repeat:no-repeat;
background-position:bottom center;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="link">
<div id="link-gif"> </div>
</div>
Quindi, in sintesi, quello che voglio che accada è: in primo luogo ho caricare l'immagine statica. Quando qualcuno passa con il mouse sopra allo #link-gif
, viene avviata la gif di animazione iniziale e, al passaggio del mouse, inizia l'animazione finale.
Per qualche motivo, quando si passa sopra l'immagine, l'immagine non viene animata. Va solo alla fine della gif. Qualcuno sa perché questo sarebbe successo?
Non si può davvero controllare gif animate in qualsiasi browser. – adeneo
@adeneo Beh, sto solo provando a mostrare con successo una gif animata al passaggio del mouse. Voglio dire tutto è possibile, giusto? ;) – bryan
Funziona perfettamente per me – Turnip