แอนิเมชั่น addClass / removeClass ด้วย jQuery

ฉันใช้ jQuery และ jQuery-ui และต้องการเคลื่อนไหวคุณลักษณะต่าง ๆ บนวัตถุต่าง ๆ

เพื่ออธิบายปัญหาที่นี่ฉันได้ทำให้มันง่ายขึ้นสำหรับ div หนึ่งที่เปลี่ยนจากสีน้ำเงินเป็นสีแดงเมื่อผู้ใช้เลื่อนเมาส์ไปที่มัน

ฉันสามารถรับพฤติกรรมที่ฉันต้องการได้เมื่อใช้animate()อย่างไรก็ตามเมื่อทำเช่นนั้นสไตล์ที่ฉันเคลื่อนไหวต้องอยู่ในรหัสภาพเคลื่อนไหวและแยกจากสไตล์ชีตของฉัน (ดูตัวอย่างที่ 1 )

ทางเลือกที่จะใช้addClass()และแต่ฉันไม่ได้รับสามารถที่จะสร้างใหม่อีกครั้งพฤติกรรมที่แน่นอนว่าผมจะได้รับกับremoveClass() animate()(ดูตัวอย่างที่ 2 )

ตัวอย่างที่ 1

ลองดูรหัสที่ฉันมีanimate():

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

มันแสดงพฤติกรรมทั้งหมดที่ฉันกำลังมองหา:

1. เคลื่อนไหวได้อย่างราบรื่นระหว่างสีแดงและสีน้ำเงิน
2. ไม่มีภาพเคลื่อนไหว 'overqueue-ing' เมื่อผู้ใช้เลื่อนเม้าส์เข้าและออกจาก div อย่างรวดเร็ว
3. หากผู้ใช้เลื่อนเมาส์ออก / เข้าในขณะที่ภาพเคลื่อนไหวยังคงเล่นอยู่จะช่วยลดความถูกต้องระหว่างสถานะ 'ครึ่งทาง' ปัจจุบันและสถานะ 'เป้าหมาย' ใหม่

แต่เนื่องจากการเปลี่ยนแปลงสไตล์ถูกกำหนดไว้ในanimate()ฉันต้องเปลี่ยนค่าสไตล์ที่นั่นและไม่สามารถชี้ไปที่สไตล์ชีทของฉันได้ 'การแตกแฟรกเมนต์' ซึ่งสไตล์ถูกกำหนดเป็นสิ่งที่รบกวนจิตใจฉันอย่างแท้จริง

ตัวอย่างที่ 2

นี่คือความพยายามที่ดีที่สุดในปัจจุบันของฉันในการใช้addClass()และremoveClass(โปรดทราบว่าเพื่อให้แอนิเมชั่นทำงานได้คุณต้อง jQuery-ui):

//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});
  });

สิ่งนี้แสดงทั้งคุณสมบัติ 1 และ 2 ของข้อกำหนดเดิมของฉันอย่างไรก็ตาม 3 ไม่ทำงาน

ฉันเข้าใจเหตุผลของสิ่งนี้:

เมื่อเคลื่อนไหวaddClass()และremoveClass()jQuery เพิ่มสไตล์ชั่วคราวให้กับองค์ประกอบแล้วเพิ่มค่าที่เหมาะสมจนกว่าจะถึงค่าของคลาสที่ระบุและจากนั้นจะเพิ่มหรือลบคลาสออกจริง

ด้วยเหตุนี้ฉันต้องลบแอตทริบิวต์ style ไม่เช่นนั้นถ้าภาพเคลื่อนไหวหยุดกลางคันแอตทริบิวต์ style จะยังคงอยู่และจะเขียนทับค่าคลาสใด ๆ อย่างถาวรเนื่องจากแอตทริบิวต์สไตล์ในแท็กมีความสำคัญสูงกว่าสไตล์คลาส

อย่างไรก็ตามเมื่อแอนิเมชันดำเนินไปครึ่งทางแล้วยังไม่ได้เพิ่มคลาสใหม่ดังนั้นด้วยวิธีนี้สีจะข้ามไปเป็นสีก่อนหน้าเมื่อผู้ใช้เลื่อนเม้าส์ของพวกเขาก่อนที่อนิเมชั่นจะเสร็จสมบูรณ์

สิ่งที่ฉันต้องการในอุดมคติคือสามารถทำสิ่งนี้:

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

อยู่ที่ไหนgetClassContentก็จะส่งคืนเนื้อหาของชั้นมีให้บริการที่ จุดสำคัญคือวิธีนี้ฉันไม่จำเป็นต้องเก็บคำจำกัดความสไตล์ไว้ทุกที่ แต่สามารถเก็บไว้ในชั้นเรียนในสไตล์ชีทของฉันได้

เนื่องจากคุณไม่ได้กังวลเกี่ยวกับ IE ทำไมไม่ใช้การเปลี่ยน css เพื่อจัดทำแอนิเมชันและ jQuery เพื่อเปลี่ยนคลาส ตัวอย่างสด: 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;
}

โซลูชันอื่น (แต่ต้องใช้ jQueryUI ตามที่ Richard Neil Ilagan ระบุไว้ในความคิดเห็น): -

addClass, removeClass และ toggleClass ยังยอมรับอาร์กิวเมนต์ที่สอง ระยะเวลาที่จะไปจากรัฐหนึ่งไปอีกรัฐหนึ่ง

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

ดู jsfiddle: - http://jsfiddle.net/6hvZT/1/

คุณสามารถใช้ jquery ui's switchClassได้นี่เป็นตัวอย่าง:

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

หรือดูjsfiddleนี้

คุณแค่ต้องการเอฟเฟกต์ jQuery UI-core (13KB) เพื่อเปิดใช้งานระยะเวลาของการเพิ่ม (เช่นเดียวกับ Omar Tariq มันชี้ให้เห็น)

ฉันกำลังดูอยู่นี้ แต่ต้องการมีอัตราการเปลี่ยนแปลงที่แตกต่างกันสำหรับการเข้าและออก

นี่คือสิ่งที่ฉันทำ:

//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');
    });
});

สิ่งนี้จะเปลี่ยนสีพื้นหลังเป็น # 5eb4fc จากนั้นค่อย ๆ จางหายกลับเป็นปกติใน 2 วินาที

นี่คือซอ

แม้ว่าคำถามนี้ค่อนข้างเก่า แต่ฉันกำลังเพิ่มข้อมูลที่ไม่ปรากฏในคำตอบอื่น ๆ

OP ใช้การหยุด () เพื่อหยุดการเคลื่อนไหวปัจจุบันทันทีที่กิจกรรมเสร็จสมบูรณ์ อย่างไรก็ตามการใช้พารามิเตอร์ที่เหมาะสมกับฟังก์ชั่นควรช่วย เช่น. stop (true, true) หรือ stop (true, false) เนื่องจากสิ่งนี้มีผลต่อภาพเคลื่อนไหวที่อยู่ในคิวอย่างดี

ลิงค์ต่อไปนี้แสดงตัวอย่างที่แสดงพารามิเตอร์ต่าง ๆ ที่มีให้กับ stop () และความแตกต่างจาก finish ()

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

แม้ว่า OP ไม่มีปัญหาในการใช้ JqueryUI แต่สำหรับผู้ใช้รายอื่นที่อาจเจอสถานการณ์ที่คล้ายกัน แต่ไม่สามารถใช้ JqueryUI / จำเป็นต้องสนับสนุน IE7 และ 8 ด้วย