jQuery إضافة تتلاشى إلى .addclass

Question

كيف أتلاشى. addclass داخل وخارج.

ها هو الرابط الالكتروني -

http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.html

وهنا الكود -

$(document).ready(function() {
  $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
    $(this).addClass('pretty-hover');
  }, function() {
    $(this).removeClass('pretty-hover');
  });
});

$(document).ready(function() {
  $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
    $(this).addClass('pretty-hover_01');
  }, function() {
    $(this).removeClass('pretty-hover_01');
  });
});

شكرًا

Answer 1

إذا كان jQuery UI خيارًا ، فيمكنك استخدامه .toggleClass(class, duration) لهذا.

أيضًا ، يمكنك على الأرجح تبسيط محددك ، يبدو الأمر كذلك :even و :odd سوف يقوم بالمهمة بناءً على محددك الحالي ، مثل هذا:

$(function() {
  $('#menu li:even').hover(function() {
    $(this).toggleClass('pretty-hover', 500);
  });
  $('#menu li:odd').hover(function() {
    $(this).toggleClass('pretty-hover_01', 500);
  });
});

أدرك أن ما سبق يبدو للخلف ، لكن :even هل حدد أول العنصر ، لأنه يعتمد على 0 ، لذلك حتى يختار 0 ، 2nd ، 4 ، إلخ. آمل أن توافق ، يجعل من الأسهل بعض الشيء الحفاظ عليه :)

تحرير بناء على التعليقات - حيث .toggleclass() تتمسك على الحوم السريعة ، إليك بديل يعمل كما هو متوقع ، لفترة أطول قليلاً:

$('#menu li.post:even').hover(function() {
  $(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});
$('#menu li.post:odd').hover(function() {
  $(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});

Answer 2

إذا كنت ترغب في تلاشى ألوان عنصر ما ، فستحتاج إلى استخدام jquery ui التي لديها دعم أكثر تقدماً للتلاشي والرسوم (لا يمكن لـ Core jQuery فقط أن تتلاشى/تحريك خصائص عدد صحيح: الألوان لا تعمل).

حتى أنه يدعم تحريك جميع الخصائص في فئة CSS بأكملها, ، لذا باستخدام jQuery UI ، يجب أن تكون قادرًا على تحقيق التأثير الذي تريده.

Answer 3

jQuery .animate الوظيفة هي أفضل رهان ، على الرغم من أن هذا لن يتيح لك التحريك بين فصول CSS - عليك تحديد الأنماط الفردية.

سيكون من الأفضل استخدام واجهة المستخدم jqquery ، لأن هذا سيوفر هذا النوع من الوظائف ، كما هو مذكور في jQuery تحريك صفحة:

ال jquery ui يمتد Project طريقة .animate () من خلال السماح ببعض الأنماط غير الرقمية مثل الألوان ليكون الرسوم المتحركة. يتضمن المشروع أيضًا آليات لتحديد الرسوم المتحركة من خلال فصول CSS بدلاً من السمات الفردية