Animazione di una trasformazione CSS con jQuery



1 Answers

Prova questo:

$('#myDiv').animate({ textIndent: 0 }, {
    step: function(go) {
      $(this).css('-moz-transform','rotate('+go+'deg)');
      $(this).css('-webkit-transform','rotate('+go+'deg)');
      $(this).css('-o-transform','rotate('+go+'deg)');
      $(this).css('transform','rotate('+go+'deg)');
    },
    duration: 500,
    complete: function(){ alert('done') }
});

http://jsfiddle.net/RPSzb/2/

Question

Sto cercando di animare un div e farlo ruotare attorno all'asse y di 180 gradi. Quando chiamo il codice seguente ottengo un errore jQuery:

$("#my_div").animate({
       "transform": "rotateY(180deg)",
       "-webkit-transform": "rotateY(180deg)",
       "-moz-transform": "rotateY(180deg)"
    }, 500, function() {
        // Callback stuff here
    });
});

Dice "Uncaught TypeError: Impossibile leggere la proprietà 'defaultView' di undefined" e dice che si trova nel file jQuery stesso ... cosa sto facendo male?




Dimentica $.animate() di jQuery, invece usa $.velocity() . Velocity.js è un'estensione di animazione di jQuery. Usa la stessa sintassi di jQuery e ti permette di animare CSS3 come trasformazioni 3D, traslazioni, rotazioni, dissolvenze di colore, transizioni, inclinazioni, ... Qualsiasi cosa tu voglia. E poiché è abbastanza intelligente usare CSS3 invece di JS ove possibile, si anima anche con una migliore performance. Non capisco perché jQuery non lo faccia ancora!

http://julian.com/research/velocity/






Related