Jquery zum Drehen eines Divs

[herbert]

Hallo Community,

ich experimentiere gerade mit Animationen. Ich möchte gerne ein DIV drehen, wenn ich bei einem anderen div mit der Maus darüber fahre. Das hab ich mal versuch mit jquery zu lösen. (jquery benutze ich erst seit der Woche) http://beta.hierbeck-consulting.de/

Mein Skript sieht so aus und funktioniert auch, AUßER beim Firefox.

<script>
$(document).ready(function(){

    $("#feld_beratung").mouseover(function() {

           $("#kreis1undschrift").animate({
                left:'90px'
            });

            $("#kreis1").addClass("Drehungrechts"); 
});
});
</script>

(ist nur die abgekürzte Version.) Meine CSS Anweisung von Drehungrechts sieht dann so aus:

#kreis1.Drehungrechts {
    -webkit-transition        : .2s;
    -webkit-transform:rotate(135deg);
    -ms-transform:rotate(135deg);
}

Meine Frage: -webkit wäre doch eigentlich für firefox oder nicht? Die Drehung macht Schwierigkeiten, die Bewegung nach rechts jedoch nicht.

Ich hoff es hat jemand einen Tipp.

[ctnew]

für firefox ist -moz-transition entscheidend

[herbert]

Ich Pfosten! Da hab ich wohl was verwechselt. Nur wenn ich das CSS erweitere, funktioniert es immer noch nicht. Steh ich aufm Schlauch??? (opera usw. fehlt auch noch, aber das is erst mal egal)

#kreis1.Drehungrechts {
     -moz-transition: .2s;
    -webkit-transition        : .2s;
     -moz-transition:rotate(135deg);
    -webkit-transform:rotate(135deg);
    -ms-transform:rotate(135deg);
}

[herbert]

fehler gefunden bei moz-transition zu transform! :-) Jetzt funktioniert alles.

Nochmal Danke ctnew.

[ctnew]

Alles klar, dein Post war schneller

Ansosnten hätte ich dem ganzen noch 2 weitere hinzugefügt - so sollte es jetzt auch im Opera klappen:

#kreis1.Drehungrechts {
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;

  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
}

[Bas]

Bei mir würde das so aussehen:

-webkit-transition-property: all; 
-moz-transition-property: all; 
-o-transition-property: all; 
transition-property: all; 
-webkit-transition-duration: 0.2s; 
-moz-transition-duration: 0.2s; 
-o-transition-duration: 0.2s; 
transition-duration: 0.2s; 
-webkit-transform: rotate(135deg); 
-moz-transform: rotate(135deg); 
-ms-transform: rotate(135deg); 
-o-transform: rotate(135deg); 
transform: rotate(135deg);

Edit: zu lange ausprobiert .. zu langsam

[herbert]

Kein Problem, trotzdem vielen Dank. Eines der wenigen Foren, in dem einem geholfen und nicht nur eine Hilfestellung ala ... "gibs bei google ein" gegeben wird.