jQuery ile addClass / removeClass'ı canlandırma

JQuery ve jQuery-ui kullanıyorum ve çeşitli nesneler üzerinde çeşitli öznitelikleri canlandırmak istiyorum.

Sorunu burada açıklamak adına, kullanıcı fareyle üzerine geldiğinde maviden kırmızıya değişen bir div'e basitleştirdim.

Kullanırken istediğim davranışı elde edebiliyorum animate(), ancak bunu yaparken animasyon yaptığım stiller animasyon kodunda olmalı ve böylece stil sayfamdan ayrı. (bakınız örnek 1 )

Bir alternatif kullanıyor addClass()ve removeClass()alabileceğim tam davranışı yeniden oluşturamadım animate(). (bakınız örnek 2 )

örnek 1

Sahip olduğum koda bir göz atalım animate():

$('#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örüntüler:

1. Kırmızı ve mavi arasında sorunsuz bir şekilde hareket eder.
2. Kullanıcı faresini hızlı bir şekilde divın içine ve dışına hareket ettirdiğinde animasyon 'aşırı hız' olmaz.
3. Kullanıcı animasyon devam ederken faresini dışarı / içeri hareket ettirirse, mevcut 'yarı' durum ile yeni 'hedef' durum arasında doğru şekilde hareket eder.

Ancak stil değişiklikleri tanımlandığından, animate()oradaki stil değerlerini değiştirmek zorundayım ve sadece stil sayfamı işaret edemez. Tarzların tanımlandığı bu 'parçalanma' beni gerçekten rahatsız eden bir şeydir.

ÖRNEK 2

İşte benim şu anki en iyi girişimi addClass()ve removeClass(animasyonun çalışması için jQuery-ui'ye ihtiyacınız olduğunu 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, orijinal gereksinimlerimin 1. ve 2. özelliklerini gösterir, ancak 3 çalışmaz.

Bunun nedenini anlıyorum:

Animasyon addClass()ve removeClass()jQuery öğeye geçici bir stil ekler ve ardından verilen sınıfın değerlerine ulaşıncaya kadar uygun değerleri artırır ve yalnızca o zaman sınıfı ekler / kaldırır.

Bu nedenle style niteliğini kaldırmam gerekir, aksi takdirde animasyon yarıda durdurulursa style niteliği kalır ve herhangi bir sınıf değerinin üzerine kalıcı olarak yazılır, çünkü bir etiketteki stil nitelikleri sınıf stillerinden daha fazla önem taşır.

Ancak animasyon yarıya kadar tamamlandığında henüz yeni sınıf eklemedi ve bu çözümle kullanıcı animasyon tamamlanmadan önce faresini hareket ettirdiğinde renk önceki renge atlar.

İdeal olarak istediğim böyle bir şey yapabilmek:

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

Nerede getClassContentsadece sağlanan sınıfın içeriği dönecekti. Anahtar nokta şu ki stil tanımlarımı her yerde tutmak zorunda değilim, ancak stil sayfamdaki sınıflarda tutabilirim.

IE konusunda endişelenmediğiniz için, neden sadece sınıfları değiştirmek için animasyon ve jQuery sağlamak için css geçişlerini kullanmıyorsunuz? 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;
}

Başka bir çözüm (ancak yorumlarda Richard Neil Ilagan'ın işaret ettiği gibi jQueryUI gerektirir): -

addClass, removeClass ve toggleClass ikinci bir argümanı da kabul eder; bir durumdan diğerine geçme süresi.

$(this).addClass('abc',1000);

Bkz. Jsfiddle: - http://jsfiddle.net/6hvZT/1/

Jquery ui kullanabilirsiniz switchClass, Heres bir örnek:

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

Veya bu jsfiddle bakın .

Ekleme süresini etkinleştirmek için jQuery UI efekt çekirdeğine (13KB) ihtiyacınız var (tıpkı Omar Tariq'in işaret ettiği gibi)

Bunu araştırıyordum ama giriş ve çıkış için farklı bir geçiş oranına sahip olmak istedim.

Sonunda bunu yaptım:

//css
.addedClass {
    background: #5eb4fc;
}

// js
function setParentTransition(id, prop, delay, style, callback) {
    $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
    callback();
}
setParentTransition(id, 'background', '0s', 'ease', function() {
    $('#elementID').addClass('addedClass');
});

setTimeout(function() {
    setParentTransition(id, 'background', '2s', 'ease', function() {
        $('#elementID').removeClass('addedClass');
    });
});

Bu, arka plan rengini anında # 5eb4fc'ye çevirir ve ardından 2 saniye içinde yavaşça normale döner.

İşte bir keman

Soru oldukça eski olmasına rağmen, diğer cevaplarda bulunmayan bilgiler ekliyorum.

OP olay tamamlanır tamamlanmaz geçerli animasyonu durdurmak için stop () kullanır. Bununla birlikte, işlevle doğru parametre karışımını kullanmak yardımcı olacaktır. Örneğin. stop (true, true) veya stop (true, false) çünkü sıradaki animasyonları iyi etkiler.

Aşağıdaki bağlantıda stop () ile kullanılabilen farklı parametreleri ve finish () 'den nasıl farklı olduklarını gösteren bir demo gösterilmektedir.

http://api.jquery.com/finish/

OP'nin JqueryUI kullanarak herhangi bir sorunu olmamasına rağmen, bu benzer senaryolarla karşılaşabilen ancak IE7 ve 8'i desteklemek için JqueryUI / need'ı kullanamayan diğer kullanıcılar içindir.