JQuery पृष्ठभूमि रंग एनिमेट काम नहीं कर रहा

Question

मैं मूल सफेद पृष्ठभूमि से 'exampleDiv' का पृष्ठभूमि रंग बदलना चाहता हूं, जब मैं नीचे दिए गए कोड को पृष्ठभूमि पीले रंग में बदलने के लिए नीचे कॉल करता हूं और फिर मूल सफेद पृष्ठभूमि में फीका होता हूं।

$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast"); 

हालांकि, यह कोड काम नहीं करता है।

मैं केवल JQuery कोर और JQuery यूआई अपने वेब पृष्ठ से लिंक है।

क्यों नहीं काम से ऊपर कोड?

Answer 1

मेरा मानना ​​है कि आप भी JQuery Color Animations की जरूरत है।

Answer 2

पृष्ठभूमि रंग एनिमेट करना jQuery 1.3.2 (या उससे पहले) में समर्थित नहीं है। केवल पैरामीटर जो संख्यात्मक मान लेते हैं समर्थित हैं। विधि पर documentation देखें। color animations plugin jQuery 1.2 के रूप में यह करने के लिए योग्यता प्रदान करती है।

Answer 3

jQuery यूआई एक विशेषता प्रभाव करता है कि आप क्या चाहते हैं।

$("exampleDiv").effect("highlight", {}, 5000); 

आपके पास हाइलाइट रंग बदलने जैसे कुछ विकल्प हैं।

Answer 4

मेरे लिए, यह effects.core.js के साथ ठीक काम करता है। हालांकि, मुझे याद नहीं है कि यह वास्तव में आवश्यक है या नहीं। मुझे लगता है कि यह केवल हेक्साडेसिमल मानों के साथ काम करता है। यहां एक नमूना होवर कोड है जो आपके द्वारा होवर के रूप में चीजों को फीका बनाता है। सोचा था कि यह उपयोगी हो सकता है:

jQuery.fn.fadeOnHover = function(fadeColor) 
{ 
    this.each(function() 
    { 
     jQuery(this).data("OrigBg",jQuery(this).css("background-color")); 
     jQuery(this).hover(
      function() 
      { 
       //Fade to the new color 
       jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000) 
      }, 
      function() 
      { 
       //Fade back to original color 
       original = jQuery(this).data("OrigBg"); 
       jQuery(this).stop().animate({backgroundColor:original},1000) 
      } 
     ); 
    }); 
} 
$(".nav a").fadeOnHover("#FFFF00"); 

Answer 5

मैं animate साथ बदलती सफलता मिली है, लेकिन पाया गया कि का उपयोग कर अपने कॉलबैक में बनाया प्लस jQuery के css ज्यादातर मामलों के लिए काम करने लगता है।

इस समारोह का प्रयास करें:

$(document).ready(function() { 

    $.fn.animateHighlight = function (highlightColor, duration) { 
     var highlightBg = highlightColor || "#FFFF9C"; 
     var animateMs = duration || "fast"; // edit is here 
     var originalBg = this.css("background-color"); 

     if (!originalBg || originalBg == highlightBg) 
      originalBg = "#FFFFFF"; // default to white 

     jQuery(this) 
      .css("backgroundColor", highlightBg) 
      .animate({ backgroundColor: originalBg }, animateMs, null, function() { 
       jQuery(this).css("backgroundColor", originalBg); 
      }); 
    }; 
}); 

और यह बहुत की तरह फोन:

$('#exampleDiv').animateHighlight(); 

IE9, FF4, और क्रोम में परीक्षण किया गया, jQuery 1.5 (इस के लिए यूआई प्लगइन जरूरत नहीं है) का उपयोग कर। मैंने jQuery रंग प्लगइन का उपयोग नहीं किया - आपको केवल उस आवश्यकता की आवश्यकता होगी यदि आप नामित रंगों का उपयोग करना चाहते हैं (उदा। 'yellow''#FFFF9C' के बजाय)।

Answer 6

मुझे इसे काम करने के लिए color.js फ़ाइल का उपयोग करना पड़ा। मैं jquery 1.4.2 का उपयोग कर रहा हूँ।

Get the color.js here

Answer 7

मैं एक ही समस्या थी और मैं काम करने के लिए जब मैं सही js फ़ाइलें शामिल सब कुछ प्राप्त करने में सक्षम था।

<script src="/Scripts/jquery-1.9.1.js"></script> 
<script src="/Scripts/jquery-ui-1.8.20.js"></script> 
<script src="/Scripts/jquery.color-2.1.2.js"></script> 

मैं इसे एक कदम आगे ले लिया और पाया एक अच्छा विस्तार किसी ने लिखा है।

$('#someId').flash('255,148,148', 1100); 

कि कोड अपने तत्व फिर वापस अपने मूल रंग के लिए लाल करने के लिए फ्लैश करने के लिए मिल जाएगा:

jQuery.fn.flash = function (color, duration) { 
    var current = this.css('backgroundColor'); 
    this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration/2) 
    .animate({ backgroundColor: current }, duration/2); 
} 

ऊपर कोड मेरा पीछा करने के लिए अनुमति देता है।

यहां कुछ नमूना कोड है। http://jsbin.com/iqasaz/2

Answer 8

मैं एक ही मुद्दे पर आया और आखिरकार यह पृष्ठ पर jquery की जेएस फ़ाइल के एकाधिक कॉल के रूप में सामने आया।

हालांकि यह किसी भी अन्य विधियों के साथ बिल्कुल ठीक काम करता है और बाएं जैसे अन्य सीएसएस गुणों के साथ प्रयास करते समय एनिमेटेड के साथ भी काम करता है, लेकिन यह एनिमेट विधि में पृष्ठभूमि रंग संपत्ति के लिए काम नहीं करता है।

इसलिए, मैंने jquery की जेएस फ़ाइल की अतिरिक्त कॉल हटा दी और यह मेरे लिए बिल्कुल ठीक काम किया।

Answer 9

बस jQuery स्क्रिप्ट नीचे इस स्निपेट जोड़ा और इसे तुरंत काम करना शुरू किया:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script> 

Source

[jQuery चेतन पृष्ठभूमि रंग] (की