jQuery animado Css

Question

Tengo un script:

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

cómo puedo animar o lento hacia abajo, por lo que no será instantánea?

Answer 1

sólo tiene que utilizar en lugar de .animate().css() (con una duración si quieres), así:

$('#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. Sin embargo, tenga en cuenta que necesita jQuery color plugin o jQuery UI para animar el color. En lo anterior, la duración es de 1000 ms, puede cambiarla o simplemente dejarla desactivada para la duración predeterminada de 400 ms.

Answer 2

El ejemplo de la página web de jQuery anima tamaño y tipo de letra, pero aquí se puede modificar para que se adapte a sus necesidades

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

Answer 3

Se podría optar por una solución CSS puro:

#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

Puede seguir usando ".css" y aplicar transiciones CSS al div afectado. Así que continúe usando ".css" y agregue los estilos a continuación a su hoja de estilo para "# hfont1". Como ".css" permite muchas más propiedades que ".animate", este es siempre mi método preferido.

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

Answer 5

Si usted está necesitando utilizar CSS con la función jQuery .animate(), puede utilizar ajustar la duración.

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

Tenemos el conjunto de propiedades de duración a 6000.

Esto establecerá el tiempo en milésimas de segundos: 6 segundos.

Después de la duración de nuestra próxima propiedad "easing" cambia la forma en que ocurre nuestra CSS.

Tenemos nuestro conjunto de posicionamiento en absoluto.

Hay dos valores predeterminados para la función absoluta: 'lineal' y 'swing'.

En este ejemplo estoy usando lineal.

Le permite usar un ritmo uniforme.

El otro 'swing' permite un aumento de velocidad exponencial.

Hay un montón de propiedades muy interesantes para su uso con animado como de rebote, etc.

$(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"); 
    }); 
});