jQuery चेतन पृष्ठभूमि

Question

मैं mouseover पर jQuery का उपयोग कर पृष्ठभूमि में बदलाव को चेतन करने की कोशिश कर रहा हूं।

मैंने कुछ उदाहरण की जाँच की है और मुझे लगता है कि यह सही है, यह फॉन्टसाइज़ जैसी अन्य संपत्तियों के साथ काम करता है, लेकिन पृष्ठभूमि रंग के साथ मुझे मिलता है और "अमान्य संपत्ति" जेएस त्रुटि। मैं जिस तत्व के साथ काम कर रहा हूं वह एक div है।

$(".usercontent").mouseover(function() {
    $(this).animate({ backgroundColor: "olive" }, "slow");
});

कोई विचार?

Comments

Jquery प्रभाव 1.8 के साथ jquery 1.4.2 के लिए मुझे यह स्वीकार करना होगा कि एंड्रयू समाधान सही काम करता है। उसकी पोस्ट नीचे देखें।

— पैट्रिक डेसजार्डिन्स

नोट: यह प्लगइन तत्व की वर्तमान पृष्ठभूमि के रंग का पता लगा रहा है - rgba(0, 0, 0, 0)जब कोई पृष्ठभूमि रंग परिभाषित नहीं होता है, तो क्रोम ब्राउज़र अपेक्षित खाली / अशक्त मान के बजाय लौटता है। इसे "ठीक" करने के लिए, तत्व में प्रारंभिक पृष्ठभूमि का रंग होना चाहिए।

— शैडो विजार्ड ईआर फॉर यू

लिंक किया हुआ पेज टूटा हुआ लगता है (कम से कम प्रोजेक्ट पेज और डेमो पेज)।

— पाओलो स्टीफन

Answer 1

यूआई लाइब्रेरी की तुलना में कलर प्लगइन केवल 4kb इतना सस्ता है। बेशक आप प्लगइन के एक सभ्य संस्करण का उपयोग करना चाहते हैं और कुछ छोटी बात नहीं है जो सफारी को संभालती नहीं है और जब संक्रमण बहुत तेज़ होते हैं तो क्रैश हो जाता है। चूंकि एक छोटा संस्करण की आपूर्ति नहीं की जाती है, आप विभिन्न कम्प्रेसर का परीक्षण कर सकते हैं और अपना खुद का न्यूनतम संस्करण बना सकते हैं । YUI को इस मामले में सबसे अच्छा संपीड़न की आवश्यकता है, केवल 2317 बाइट्स की आवश्यकता है और चूंकि यह बहुत छोटा है - यहां यह है:

(function (d) {
    d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
        d.fx.step[e] = function (g) {
            if (!g.colorInit) {
                g.start = c(g.elem, e);
                g.end = b(g.end);
                g.colorInit = true
            }
            g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
        }
    });

    function b(f) {
        var e;
        if (f && f.constructor == Array && f.length == 3) {
            return f
        }
        if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
            return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
        }
        if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
            return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
        }
        if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
            return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
        }
        if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
            return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
        }
        if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
            return a.transparent
        }
        return a[d.trim(f).toLowerCase()]
    }
    function c(g, e) {
        var f;
        do {
            f = d.css(g, e);
            if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
                break
            }
            e = "backgroundColor"
        } while (g = g.parentNode);
        return b(f)
    }
    var a = {
        aqua: [0, 255, 255],
        azure: [240, 255, 255],
        beige: [245, 245, 220],
        black: [0, 0, 0],
        blue: [0, 0, 255],
        brown: [165, 42, 42],
        cyan: [0, 255, 255],
        darkblue: [0, 0, 139],
        darkcyan: [0, 139, 139],
        darkgrey: [169, 169, 169],
        darkgreen: [0, 100, 0],
        darkkhaki: [189, 183, 107],
        darkmagenta: [139, 0, 139],
        darkolivegreen: [85, 107, 47],
        darkorange: [255, 140, 0],
        darkorchid: [153, 50, 204],
        darkred: [139, 0, 0],
        darksalmon: [233, 150, 122],
        darkviolet: [148, 0, 211],
        fuchsia: [255, 0, 255],
        gold: [255, 215, 0],
        green: [0, 128, 0],
        indigo: [75, 0, 130],
        khaki: [240, 230, 140],
        lightblue: [173, 216, 230],
        lightcyan: [224, 255, 255],
        lightgreen: [144, 238, 144],
        lightgrey: [211, 211, 211],
        lightpink: [255, 182, 193],
        lightyellow: [255, 255, 224],
        lime: [0, 255, 0],
        magenta: [255, 0, 255],
        maroon: [128, 0, 0],
        navy: [0, 0, 128],
        olive: [128, 128, 0],
        orange: [255, 165, 0],
        pink: [255, 192, 203],
        purple: [128, 0, 128],
        violet: [128, 0, 128],
        red: [255, 0, 0],
        silver: [192, 192, 192],
        white: [255, 255, 255],
        yellow: [255, 255, 0],
        transparent: [255, 255, 255]
    }
})(jQuery);

Comments

ठीक है, लिंक पर जाएं एंड्रयू प्रस्ताव। फ़ाइल डाउनलोड करें। आपको इसे अपने प्रोजेक्ट में जोड़ना होगा। आप अभी भी jquery.effects.core को अपनी परियोजना में रख सकते हैं यह पूरी तरह से काम करेगा। जवाब के लिए धन्यवाद। +1

— पैट्रिक डेसजार्डिन्स

मैं बस अपने मौजूदा 'jquery-ui-1.8.2.min.js' फ़ाइल में उपरोक्त चिपकाया और ... सब कुछ अभी भी काम :-)

— डेव Everitt

मैं ध्यान देना चाहूंगा, पिछले साल (2011) में इस प्लगइन के लेखक ने एक संस्करण 2 जारी किया था जिसमें इसकी बहुत सारी अच्छी विशेषताएं हैं, लेकिन मूल कार्यक्षमता के लिए यह आवश्यक नहीं है कि आम तौर पर इसके लिए मांग की जाती है। यह अब 20 + kb बड़ा है। आप v1पुराने संस्करण को प्राप्त करने के लिए शाखा का चयन कर सकते हैं (जो अभी भी काम करता है) लेकिन बहुत हल्का वजन है।

— अरेन

एफडब्ल्यूआईडब्ल्यू - आप कोड में रंग-से- आरबीजी मैपिंग निकाल सकते हैं और आकार को और कम कर सकते हैं: raw.github.com/gist/1891361/… । नकारात्मक पक्ष यह है कि आप एनीमेशन के लिए रंग नामों का उपयोग नहीं कर सकते हैं। आपको आरजीबी मूल्यों का उपयोग करना होगा।

— नियाज

jQuery 1.8 btw में इस प्लग को तोड़ता है। curCSS किसी भी अधिक jQuery में नहीं है।

— रिच ब्रैडशॉ

Answer 2

मेरे पास एक ही समस्या थी और इसे jQuery UI सहित शामिल किया गया था। यहाँ पूरी स्क्रिप्ट है:

<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>


<script type="text/javascript">
$(document).ready(function() {
$('#menu ul li.item').hover(
    function() {
        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#943D20'}, 100);
    });
});
</script>

Answer 3

इसे CSS3-Transitions के साथ करें। समर्थन महान है (सभी आधुनिक ब्राउज़र, यहां तक ​​कि IE)। Compass और SASS के साथ यह जल्दी किया जाता है:

#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

शुद्ध सीएसएस:

#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}

मैंने इस विषय के बारे में एक जर्मन लेख लिखा है: http://www.solife.cc/blog/animation-farben-css3-sransition.html

Comments

होवर के साथ फिडल करें और यहां क्लिक करें : jsfiddle.net/K5Qyx

— डेम पिलाफियन

Answer 4

बिटस्टॉर्म में सबसे अच्छा jquery रंग एनीमेशन प्लगइन है जो मैंने देखा है। यह jquery रंग परियोजना में सुधार है। यह आरजीबीए को भी सपोर्ट करता है।

http://www.bitstorm.org/jquery/color-animation/

Comments

मैं आपको यह बताने के लिए पर्याप्त धन्यवाद नहीं कर सकता कि यह 'आरजीबीए' का समर्थन करता है, जो कि वास्तव में मैं देख रहा था

— ओनिमुशा

Answer 5

इस कार्यक्षमता को जोड़ने के लिए आप jQuery UI का उपयोग कर सकते हैं। आप अपनी जरूरत के अनुसार बस हड़प सकते हैं, इसलिए यदि आप रंग को चेतन करना चाहते हैं, तो आपको निम्नलिखित कोड को शामिल करना होगा। अगर मुझे नवीनतम jQuery UI (वर्तमान में 1.8.14) से मिला है

/******************************************************************************/
/****************************** COLOR ANIMATIONS ******************************/
/******************************************************************************/

// override the animation for color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
    'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
function(i, attr) {
    $.fx.step[attr] = function(fx) {
        if (!fx.colorInit) {
            fx.start = getColor(fx.elem, attr);
            fx.end = getRGB(fx.end);
            fx.colorInit = true;
        }

        fx.elem.style[attr] = 'rgb(' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
    };
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
        var result;

        // Check if we're already dealing with an array of colors
        if ( color && color.constructor == Array && color.length == 3 )
                return color;

        // Look for rgb(num,num,num)
        if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];

        // Look for rgb(num%,num%,num%)
        if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

        // Look for #a0b1c2
        if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

        // Look for #fff
        if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

        // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
        if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
                return colors['transparent'];

        // Otherwise, we're most likely dealing with a named color
        return colors[$.trim(color).toLowerCase()];
}

function getColor(elem, attr) {
        var color;

        do {
                color = $.curCSS(elem, attr);

                // Keep going until we find an element that has color, or we hit the body
                if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
                        break;

                attr = "backgroundColor";
        } while ( elem = elem.parentNode );

        return getRGB(color);
};

YUI के साथ कंप्रेस करने के बाद यह केवल 1.43kb है:

$.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","borderColor","color","outlineColor"],function(b,a){$.fx.step[a]=function(c){if(!c.colorInit){c.start=getColor(c.elem,a);c.end=getRGB(c.end);c.colorInit=true}c.elem.style[a]="rgb("+Math.max(Math.min(parseInt((c.pos*(c.end[0]-c.start[0]))+c.start[0],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[1]-c.start[1]))+c.start[1],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[2]-c.start[2]))+c.start[2],10),255),0)+")"}});function getRGB(b){var a;if(b&&b.constructor==Array&&b.length==3){return b}if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)){return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]}if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}if(a=/rgba\(0, 0, 0, 0\)/.exec(b)){return colors.transparent}return colors[$.trim(b).toLowerCase()]}function getColor(c,a){var b;do{b=$.curCSS(c,a);if(b!=""&&b!="transparent"||$.nodeName(c,"body")){break}a="backgroundColor"}while(c=c.parentNode);return getRGB(b)};

आप CSS3 के बदलावों का उपयोग करके रंगों को भी एनिमेट कर सकते हैं लेकिन यह केवल आधुनिक ब्राउज़रों द्वारा समर्थित है।

a.test {
  color: red;
  -moz-transition-property: color;  /* FF4+ */
  -moz-transition-duration: 1s;
  -webkit-transition-property: color;  /* Saf3.2+, Chrome */
  -webkit-transition-duration: 1s;
  -o-transition-property: color;  /* Opera 10.5+ */
  -o-transition-duration: 1s;
  -ms-transition-property: color;  /* IE10? */
  -ms-transition-duration: 1s;
  transition-property: color;  /* Standard */
  transition-duration: 1s;
  }

  a.test:hover {
  color: blue;
  }

आशुलिपि संपत्ति का उपयोग करना:

/* shorthand notation for transition properties */
/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */

a.test {
  color: red;
  -moz-transition: color 1s;
  -webkit-transition: color 1s;
  -o-transition: color 1s;
  -ms-transition: color 1s;
  transition: color 1s;
  }

a.test {
  color: blue;
 }

नियमित जावास्क्रिप्ट संक्रमणों के विपरीत, CSS3 संक्रमण हार्डवेयर त्वरित और इसलिए चिकनी हैं। ब्राउजर CSS3 के बदलावों का समर्थन करता है या नहीं, यह जानने के लिए आप मॉर्डनइज़्र का उपयोग कर सकते हैं, अगर ऐसा नहीं हुआ तो आप एक गिरावट के रूप में jQuery का उपयोग कर सकते हैं:

if ( !cssTransitions() ) {
    $(document).ready(function(){
        $(".test").hover(function () {
                $(this).stop().animate({ backgroundColor: "red" },500)
             }, function() {
                 $(this).stop().animate({ backgroundColor: "blue" },500)}    
             );
    }); 
}

एक नया शुरू करने से पहले वर्तमान एनीमेशन को रोकने के लिए स्टॉप () का उपयोग करना याद रखें अन्यथा जब आप बहुत तेजी से तत्व से गुजरते हैं, तो प्रभाव थोड़ी देर के लिए झपकाता रहता है।

Answer 6

किसी को भी यह पता लगाने के लिए। यह jQuery UI संस्करण का उपयोग करने से बेहतर है क्योंकि यह सभी ब्राउज़रों पर काम करता है। रंग प्लगइन में सफारी और क्रोम के साथ समस्याएं हैं। यह कभी-कभी ही काम करता है।

Comments

-1 क्रोम में कलर प्लगइन का नवीनतम संस्करण पूरी तरह से काम करता है।

— एंड्रयू

अतिरिक्त स्क्रिप्ट को सिर्फ चेतन पृष्ठभूमि के लिए शामिल करना भारी है

— वनायरोस

Answer 7

आप 2 div का उपयोग कर सकते हैं:

आप इसके ऊपर एक क्लोन लगा सकते हैं और क्लोन को लुप्त करते हुए मूल को बाहर निकाल सकते हैं।

जब फ़ेड्स किए जाते हैं, तो नए बीजी के साथ मूल को पुनर्स्थापित करें।

$(function(){
    var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset();

      // Create clone w other bg and position it on original
    $elie.toggleClass("class1, class2").appendTo("body")
         .offset({top: os.top, left: os.left}).hide();

    $mytd.mouseover(function() {            
          // Fade original
        $mytd.fadeOut(3000, function() {
            $mytd.toggleClass("class1, class2").show();
            $elie.toggleClass("class1, class2").hide();            
        });
          // Show clone at same time
        $elie.fadeIn(3000);
    });
});​

jsFiddle उदाहरण

.toggleClass()
.offset()
.fadeIn()
.fadeOut()

Comments

हो सकता है कि यह किसी बिंदु पर काम करता हो, कम से कम सही से यह नहीं लगता है कि इसकी उम्मीद की जाती है।

— एपलेग

@epeleg - मेरे लिए मैक क्रोम में काम करता है। आप रंगीन आयत पर क्लिक करें, और यह रंग बदलता है (2013 - 07 - 15)

— पीटर Ajtai

मैं नहीं जानता कि कैसे लेकिन वास्तव में अब यह मेरी windows7 क्रोम पर काम करता है। शायद मैं yeasterday किया क्रोम अद्यतन से संबंधित है? वैसे भी जैसा कि मैंने कहा कि वास्तव में यह अब काम करता है।

— epeleg

Answer 8

मैंने वांछित प्रभाव के लिए JQuery के साथ CSS बदलावों के संयोजन का उपयोग किया; स्पष्ट रूप से ब्राउज़र जो सीएसएस संक्रमण का समर्थन नहीं करते हैं, चेतन नहीं होगा, लेकिन इसका एक हल्का विकल्प है जो अधिकांश ब्राउज़रों के लिए अच्छी तरह से काम करता है और मेरी आवश्यकताओं के लिए स्वीकार्य गिरावट है।

पृष्ठभूमि का रंग बदलने के लिए जक्वरी:

   $('.mylinkholder a').hover(
        function () {
            $(this).css({ backgroundColor: '#f0f0f0' }); 
        },
        function () {
            $(this).css({ backgroundColor: '#fff' });
        }
    );

सीएसएस पृष्ठभूमि रंग परिवर्तन फीका करने के लिए संक्रमण का उपयोग कर

   .mylinkholder a
   {
   transition: background-color .5s ease-in-out;
   -moz-transition: background-color .5s ease-in-out;
   -webkit-transition: background-color .5s ease-in-out; 
  -o-transition: background-color .5s ease-in-out; 
   }

Answer 9

इन दिनों jQuery के रंग प्लगइन निम्नलिखित रंगों का समर्थन करता है:

aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]

Comments

क्या आप कृपया स्रोत उद्धृत कर सकते हैं। लिस्टिंग के लिए धन्यवाद btw।

— श्रीकांत शरत

यह सूची jQuery के रंग प्लग इन से आई है: plugins.jquery.com/project/color

— spoulson

-1 आप कलर लिस्ट को आउट ऑफ डेट वर्जन कहते हैं। वर्तमान संस्करण में कम से कम एक अतिरिक्त रंग है जिसे मैंने देखा है।

— एंड्रयू

Answer 10

मैं इसे प्राप्त करने में देरी () का उपयोग करना पसंद करता हूं, यहां एक उदाहरण है:

jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

इसे एक फ़ंक्शन द्वारा बुलाया जा सकता है, जिसमें "एलीमेंट" तत्व वर्ग / नाम / आदि है। तत्व तुरंत # FCFCD8 पृष्ठभूमि के साथ दिखाई देगा, एक सेकंड के लिए पकड़, फिर #EFEAEA में फीका।

Answer 11

बस निम्नलिखित स्निपेट को अपनी jquery स्क्रिप्ट में जोड़ें और आनंद लें:

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

उदाहरण देखें

अधिक जानकारी के लिए संदर्भ

Comments

कृपया उदाहरणों को इनलाइन करें ताकि वे लिंक-रोट से ग्रस्त न हों।

— एग

Answer 12

मैं एक ही मुद्दे के साथ इस पृष्ठ पर ठोकर खाई, लेकिन निम्नलिखित समस्याएं:

1. मैं अपने वर्तमान सेट-अप के साथ एक अतिरिक्त jQuery प्लगइन फ़ाइल शामिल नहीं कर सकता।
2. मैं कोड के बड़े ब्लॉकों को चिपकाने में सहज नहीं हूं जो मेरे पास पढ़ने और मान्य करने का समय नहीं है।
3. मेरे पास सीएसएस तक पहुंच नहीं है।
4. मेरे पास कार्यान्वयन के लिए शायद ही कोई समय था (यह केवल एक व्यवस्थापक पृष्ठ पर एक दृश्य सुधार था)

ऊपर के साथ कि बहुत ज्यादा हर जवाब से इनकार किया। मेरे रंग के फीका होने को देखते हुए, मैं बहुत ही सरल था, मैंने इसके बजाय निम्नलिखित त्वरित हैक का उपयोग किया:

element
  .css('color','#FF0000')
;
$('<div />')
  .css('width',0)
  .animate(
    {'width':100},
    {
      duration: 3000,
      step:function(now){
        var v = (255 - 255/100 * now).toString(16);
        v = (v.length < 2 ? '0' : '') + v.substr(0,2);
        element.css('color','#'+v+'0000');
      }
    }
  )
;

उपरोक्त एक अस्थायी div बनाता है जिसे दस्तावेज़ प्रवाह में कभी नहीं रखा जाता है। मैं तो इस मामले में - उस तत्व की एक संख्यात्मक संपत्ति चेतन करने के लिए jQuery के अंतर्निहित एनीमेशन का उपयोग करता हूंwidth - जो प्रतिशत (0 से 100) का प्रतिनिधित्व कर सकता है। फिर, चरण फ़ंक्शन का उपयोग करते हुए, मैं इस संख्यात्मक एनीमेशन को सरल हेक्स कैक्लुलेशन के साथ पाठ रंग में स्थानांतरित करता हूं।

उसी के साथ हासिल किया जा सकता था setInterval, लेकिन इस विधि का उपयोग करके आप jQuery के एनीमेशन विधियों से लाभ उठा सकते हैं - जैसे .stop()- और आप उपयोग कर सकते हैं easingऔरduration ।

स्पष्ट रूप से यह केवल साधारण रंग के फीके के लिए उपयोग किया जाता है, अधिक जटिल रंग रूपांतरणों के लिए आपको उपरोक्त उत्तरों में से एक का उपयोग करने की आवश्यकता होगी - या अपने स्वयं के रंग फीका गणित को कोड करें :)

Answer 13

इसको आजमाओ:

(function($) {  

            var i = 0;  

            var someBackground = $(".someBackground");  
            var someColors = [ "yellow", "red", "blue", "pink" ];  


            someBackground.css('backgroundColor', someColors[0]);  

            window.setInterval(function() {  
                i = i == someColors.length ? 0 : i;  
                someBackground.animate({backgroundColor: someColors[i]}, 3000);  
                i++;  
            }, 30);  

})(jQuery);  

आप यहां उदाहरण देख सकते हैं: http://jquerydemo.com/demo/jquery-animate-background-colm.xx

Answer 14

ColorBlend प्लग में वही करता है जो आप चाहते हैं

http://plugins.jquery.com/project/colorBlend

यहाँ मेरा हाईलाइट कोड है

$("#container").colorBlend([{
    colorList:["white",  "yellow"], 
    param:"background-color",
    cycles: 1,
    duration: 500
}]);

Answer 15

यदि आप केवल कोर jQuery कार्यक्षमता का उपयोग करके अपनी पृष्ठभूमि को एनिमेट नहीं करना चाहते हैं, तो यह प्रयास करें:

jQuery(".usercontent").mouseover(function() {
      jQuery(".usercontent").animate({backgroundColor:'red'}, 'fast', 'linear', function() {
            jQuery(this).animate({
                backgroundColor: 'white'
            }, 'normal', 'linear', function() {
                jQuery(this).css({'background':'none', backgroundColor : ''});
            });
        });

Answer 16

इसका उपयोग करने का प्रयास करें

-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;

Answer 17

इसको आजमाओ:

jQuery(".usercontent").hover(function() {
    jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
    jQuery(this).animate({backgroundColor:"white"}, "slow");
});

प्रभावों के साथ संशोधित तरीका:

jQuery(".usercontent").hover(function() {

    jQuery(this).fadeout("slow",function(){
        jQuery(this).animate({"color","yellow"}, "slow");
    });
});