jQuery animate.Forum
Tenho um guião:
$('#hfont1').hover(
function() {
$(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
},
function() {
$(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
}
);
5 answers
USA .animate() em vez de .css() (com uma duração se você quiser), assim:
$('#hfont1').hover(function() {
$(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
$(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});
Pode testá-lo aqui. Note, no entanto, que você precisa do 'plugin' de cores jquery , ou 'UI jQuery' ' incluído para animar a cor. No acima, a duração é de 1000ms, você pode alterá-lo, ou simplesmente deixá-lo fora para a duração padrão de 400ms.
Pode optar por uma solução CSS pura:
#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 */
}
O exemplo do site da jQuery anima o tamanho e a fonte, mas você pode modificá-lo facilmente de acordo com as suas necessidades
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
Ainda podes usar".CSS " e aplicar transições css para o div que está sendo afetado. Então continue usando".css "e adicione os estilos abaixo à sua folha de estilo para"#hfont1". Desde ".css "permite muito mais propriedades do que".animate", este é sempre o meu método preferido.
#hfont1 {
-webkit-transition: width 0.4s;
transition: width 0.4s;
}
Se necessitar de utilizar o CSS com a função jQuery .animate(), pode usar a opção Definir a duração.
$("#my_image").css({
'left':'1000px',
6000, ''
});
Existem dois predefinidos para a função absoluta:' linear 'e'swing'.
Neste exemplo estou a usar linear.
Permite-lhe usar um ritmo par.
O outro 'swing' permite um aumento exponencial da velocidade.
Há um monte de propriedades realmente legais para usar com animação como o salto, 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");
});
});