jQuery canlandırın .css

Question

Ben bir komut dosyası:

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

alışkanlık anlık olması bu yüzden, o animasyon ya da yavaşlatabilir nasıl

? (Isterseniz bir süre ile)

Answer 1

Bunun gibi, .animate() yerine .css() kullanın:

$('#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. Yine de, rengi hareketlendirmek için jQuery color plugin veya jQuery UI'a dahil etmeniz gerekir. Yukarıda, süre 1000 ms'dir, bunu değiştirebilir veya varsayılan 400ms süresi için onu bırakabilirsiniz.

Answer 2

jQuery'nin web sitesinden örnek boyutunu VE yazı canlandıran ancak kolayca ihtiyaçlarınızı

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

sığacak şekilde değiştirebilir

Sen saf CSS çözümü tercih olabilir

Answer 3

:

#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

Hala ".css" kullanabilir ve etkilenen div için css geçişlerini uygulayabilirsiniz. Bu yüzden ".css" kullanmaya devam edin ve "# hfont1" için aşağıdaki stilleri stil sayfanıza ekleyin. ".css", ".animate" den çok daha fazla özellik sağladığından, bu her zaman tercih ettiğim yöntemdir. Eğer jQuery .animate() fonksiyonu ile CSS kullanmaya gerek varsa

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

Answer 5

, sen süresini ayarlamak kullanabilirsiniz. 6 saniye:

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

Biz saniye binde zaman belirleyecektir 6000.

Bu kadar süre özelliği grubuna sahiptir.

Süre bitiminde, bir sonraki özelliğimiz "gevşeme", CSS'mizin nasıl gerçekleştiğini değiştirir.

Konumlandırma ayarlarımızı mutlak olarak ayarladık.

Mutlak işlev için varsayılan iki tane var: 'doğrusal' ve 'salıncak'.

Bu örnekte doğrusal kullanıyorum.

Düzgün bir tempo kullanmak için izin verir.

Diğer 'salıncak' üstel hız artışı sağlar.

vb yansıma ışığı canlandırılır ile kullanmak gerçekten harika özellikler bir demet,

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