JQuery kullanarak ve jQuery uı ve çeşitli nesneler üzerinde çeşitli özellikleri animasyon eklemek istiyorum ben.

Burada sorunu açıklayan uğruna kullanıcının fareler kırmızı maviden değiştiren bir div için basitleştirdim.

animate(), yani hareketlendirme Ben Stiller animasyon olmak zorunda yaparken ancak kod ve kullanarak stil sayfamı ayrıdır istediğim zaman davranışı elde etmek mümkün duyuyorum. (bkzörnek 1)

Alternatif addClass() removeClass() ama yeniden oluşturmak mümkün olmamıştır animate() ile tam davranış kullanıyor. (bkzörnek 2)

Örnek 1

animate() var koda bir göz atalım

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

aradığım tüm davranışlar gösterir:

1. Animasyon sorunsuz arasında kırmızı ve mavi.
2. Hayır animasyon 'overqueue-ing' kullanıcı dıv çabuk ve fare hareket ettiğinde.
3. Eğer kullanıcı bu animasyonu hala doğru akım arasındaki kolaylaştırır çalarken/kendi fare hareket ederse '' devlet ve yeni bir 'hedef' devlet yarı yol.

Ama tarzı değişiklikleri animate() tanımlı olduğu değerler var, ve sadece benim stil işaret olabilir mi stilini değiştirmek için var. Bu 'parçalanan' stilleri tanımlandığı gerçekten beni rahatsız eden birşey.

Örnek 2

Burada mevcut en iyi girişimim addClass() removeClass (iş için animasyon için jQuery-uı gerektiğini unutmayın):

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

Bu sergiler her iki özellik 1. ve 2. benim orijinal gereksinimleri, ancak 3 çalışmıyor.

Bunun nedenini anlıyorum:

Ne zaman animasyon addClass() removeClass() jQuery ekler geçici bir stil öğesi, ve daha sonra aralıklarla uygun değerleri kadar ulaşacağı değer verilen sınıfı, ve ancak o zaman sahiden Ekle/Kaldır sınıfı.

Çünkü bu var kaldırmak stil niteliği, aksi takdirde animasyon durdu yarım stili özniteliği kalacak ve üzerine sürekli olarak herhangi bir sınıf değerleri, beri stil öznitelikleri etiketine sahip yüksek bir öneme daha sınıf stilleri.

Ancak animasyon yarı bittiğinde henüz yeni sınıf eklendi değil ve bu çözüm ile ne renk kullanıcı animasyon tamamlanmadan önce kendi fare hareket ettiğinde önceki renkli atlar.

İdeal olarak istediğim böyle bir şey yapabilmek için

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

getClassContent sadece verilen sınıf içeriğini dönecekti. Ana nokta, bu şekilde her yerde stil tanımları benim saklayacak bir şeyim yok, ama benim stil sınıfları onları tutabilir.

Herhangi bir yardım çok mutluluk duyacağız.

YANİ endişe değildir bu yana, neden sadece css geçişleri ve sınıfları değiştirmek için animasyon jQuery sağlamak için kullanın. Canlı örnek: http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}