CSS gradyan animasyonu

Question

Üzerinde CSS3 gradyanı olan bir düğme (anchor) var.
Kullanıcı, düğmenin üzerine geldiğinde degradeyi bir renkle canlandırmak/yok etmek istiyorum.
Sorun şu ki, jQuery UI animasyonu renklerdeki değişiklikler yalnızca düzenli olanlarda değil de geçici olarak çalışıyor.
Herhangi bir fikrin var mı?
Teşekkürler!

Answer 1

Tüm tarayıcılarda desteklenmese de bir CSS3 animasyonu kullanabilirsiniz. Bu sayfa, arka plan rengini değiştirmenin bir örneğine sahiptir, açıkça degradeyi eklemeniz gerekir.

http://css3.bradshawenterprises.com/animations/

Answer 2

bunu destekleyen tarayıcılar için Css3 Degradeleri animasyon için jQuery Plugin yazdım.

Bunu here

Ben kullanmayı kolaylaştırmak için CSS3 geçişlerini normalleşmesi için yazdığı bir Gradient cssHook kullanır bulabilirsiniz.

Sen gibi kullanırsınız:

$("#elem").animateGradient('linear-gradient(red, blue)', 1000); 

O yüzden de diğer animasyonlar ekleyebilirsiniz $.queue ve $.dequeue/next() kullanır.

Bunun çalışması için önce ayarlanacak bir degrade gerekir.Animasyonla ilgili sorun, jQuery'nin genellikle CSS Mülk değerinde değil, örneğin bir değerin içinde olduğu bir sayıdır.

Answer 3

Bu jquery kitaplığını Backgroundor olarak adlandırın, kendim yazdım.

Sadece $('#divId').backgroundor(); yazın ve işe yarayacak çok fazla seçenek var. kontrol edin:

// the values here are the default values 
options = { 
    opacityval : 0; // int, only 1 or 0 are accepted now (can be boolean too) 
    intervaltime : 100; // int, interval time value 
    values  : [0,51,75]; // array of int, default percentage values for the linear gradient colors 
    colors  : ['#499bea','#207ce5','#1679e3']; // array of string (hex values), default colors for the linear gradient 
    color   : '#000000'; // string (hex value), default color for opacity animation 
    animspeed  : 'linear'; // string, default animation curve 
    animdegree : '90deg'; // string, default linear-gradient degree 
}