2011-09-08 13 views
5

Witam, czy ktoś może pokazać mi, jak odtworzyć ten efekt css3 za pomocą jquery za pomocą opóźnienia/animacji?Odtwarzanie transformacji css3 z jquery

.element:hover{ 
-moz-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-webkit-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-o-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
-ms-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); 
z-index:9999; 

} 

JSFIDDLE

+4

nie jest to tylko skalowanie szerokość i wysokość elementu jest? –

+0

http://jsfiddle.net/2xWXY/ – sbaaaang

Odpowiedz

1

Oto coś PRETTY blisko tego, o co prosisz. Jestem pewien, że można dostosować go do swoich potrzeb

$('.element').hover(function(){ 

    $(this).css('position','relative').animate({ 
     height: $(this).height()*1.3, 
     width: $(this).width()*1.3, 
     left: '-=' + $(this).width() /4, 
     top: '-=' + $(this).height() /4, 
     'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) * 1.3 + 'px' 
    },'fast'); 
}, 
function() {     
     $(this).css('position','relative').animate({ 
     height: $(this).height()/1.3, 
     width: $(this).width()/1.3, 
     left: 0, 
     top: 0, 
     'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2)/1.3 + 'px' 
    },'fast'); 
}    

); 

http://jsfiddle.net/dTkhM/2/

+0

uhmmm ... spróbuj przejechać wiele razy rekurencyjnie myszką i myszką: P – sbaaaang

+2

Powiedziałem, że nie jest idealny, prawda? Problem polega na tym, że zmieniając szerokość i wysokość elementu div, skaluje się on od lewego górnego rogu, a nie środka, tak jak przy transformacji css3. Aby to naprawić, musiałem zadziwić zmianą właściwości TOP i LEFT, ale nie wiem, jakie powinny być prawidłowe wartości dla nich. Innym problemem jest to, że nie jestem pewien, co robi CSS z wartościami dziesiętnymi, np. Rozmiar czcionki: 13.313452px na przykład. –

+0

Tak, to nie było moje zdanie;) Chodziło tylko o to, że twój kod jest całkiem doskonały, ale nie mogę przyjąć odpowiedzi z jakiejkolwiek przyczyny tego małego błędu;) – sbaaaang

2

Oto jak mogę iść o wdrożenie prostego obrotu (nie biorąc klatek pod uwagę):

$(function(){ 
    (function(n){ 
     this.interval = n; 
     this.transform = { 
      'rotation': 0 
     }; 

     this.start = function(){ 
      setInterval(this.update, this.interval); 
     }; 

     this.update = function(){ 
      this.transform['rotation'] = (this.transform.rotation + 10) % 360; 
      $('div').css('transform', 'rotate(' + this.transform.rotation + 'deg)'); 
     }; 
     return this; 
    })(30).start(); 
}); 

http://jsfiddle.net/dbrecht/82aUL/1/

To pokazuje prostą animację. Powinieneś być w stanie wymyślić, jak połączyć resztę.

+0

ehm ..: P ... nie wiem, ale dla mnie ten kod nie działa na jsfiddle :( – sbaaaang

+1

To tylko chrome atm: –

+0

yep: p Odpowiedź brian jest ostateczna ;) – sbaaaang

Powiązane problemy