jquery belebt .css-

Question

Ich habe ein Skript:

$('#hfont1').hover(
    function() { 
     $(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover 
    }, 
    function() { 
     $(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout 
    } 
); 

, wie ich es zu animieren oder sie verlangsamen, so wird es nicht sofort sein?

Answer 1

Verwenden Sie einfach .animate() statt .css() (mit einer Dauer, wenn Sie wollen), wie folgt aus:

$('#hfont1').hover(function() { 
    $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000); 
}, function() { 
    $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000); 
}); 

You can test it here. Beachten Sie jedoch, dass Sie entweder jQuery color plugin oder jQuery UI benötigen, um die Farbe zu animieren. Im obigen Beispiel beträgt die Dauer 1000ms, Sie können sie ändern oder sie einfach für die Standarddauer von 400ms belassen.

Answer 2

Das Beispiel von jQuery Website beseelt Größe und Schriftart, aber man kann es leicht Ihre Bedürfnisse anpassen passen

$("#go").click(function(){ 
    $("#block").animate({ 
    width: "70%", 
    opacity: 0.4, 
    marginLeft: "0.6in", 
    fontSize: "3em", 
    borderWidth: "10px" 
    }, 1500); 

Answer 3

Sie für eine reine CSS-Lösung entscheiden könnte:

#hfont1 { 
    transition: color 1s ease-in-out; 
    -moz-transition: color 1s ease-in-out; /* FF 4 */ 
    -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */ 
    -o-transition: color 1s ease-in-out; /* Opera */ 
} 

Answer 4

Sie können tatsächlich noch ".css" verwenden und CSS-Übergänge auf das betroffene div anwenden. Verwenden Sie also weiterhin ".css" und fügen Sie Ihrem Stylesheet die folgenden Stile für "# hfont1" hinzu. Da ".css" viel mehr Eigenschaften als ".animate" erlaubt, ist dies immer meine bevorzugte Methode.

#hfont1 { 
    -webkit-transition: width 0.4s; 
    transition: width 0.4s; 
} 

Answer 5

Wenn Sie benötigen CSS mit der jQuery .animate() Funktion zu nutzen, können Sie die Dauer einstellen verwenden.

$("#my_image").css({ 
    'left':'1000px', 
    6000, '' 
}); 

Wir haben die Dauer-Eigenschaft auf 6000.

die Zeit in tausendstel Sekunden Dies wird eingestellt: 6 Sekunden.

Nach der Dauer unserer nächsten Eigenschaft "easing" ändert sich, wie unsere CSS passiert.

Wir haben unsere Positionierung auf absolut eingestellt.

Es gibt zwei Standardwerte für die absolute Funktion: 'linear' und 'swing'.

In diesem Beispiel verwende ich linear.

Es ermöglicht eine gleichmäßige Geschwindigkeit.

Die andere "Swing" ermöglicht eine exponentielle Geschwindigkeitserhöhung.

Es gibt eine Reihe von wirklich cool Eigenschaften mit belebten wie Bounce, etc. verwendet

$(document).ready(function(){ 
    $("#my_image").css({ 
     'height': '100px', 
     'width':'100px', 
     'background-color':'#0000EE', 
     'position':'absolute' 
    });// property than value 

    $("#my_image").animate({ 
     'left':'1000px' 
    },6000, 'linear', function(){ 
     alert("Done Animating"); 
    }); 
});