javascript - jQuery एनिमेट पृष्ठभूमि रंग




colors jquery-animate (13)

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

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

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

कोई विचार?


अजीब चीज यह है कि आप CSS3 संक्रमण का उपयोग करके एनिमेट कर सकते हैं लेकिन jQuery के साथ ऐसा नहीं कर सकते हैं। अफ़सोस की बात :(

एनिमेट पृष्ठभूमि पृष्ठभूमि पर माउसओवर तुलना पर रंग (नवीनतम jQuery रंग प्लगइन सहित उदाहरण)


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

आप क्लोन को लुप्त करते समय इसके ऊपर एक क्लोन डाल सकते हैं और मूल आउट फीका कर सकते हैं।

जब fades किया जाता है, मूल बीजी के साथ मूल बहाल।

$(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);
    });
});​

जेएसएफल्ड उदाहरण


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


इन दिनों 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]

इसका उपयोग करने की कोशिश करो

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

इसको आजमाओ:

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

इसे CSS3-संक्रमण के साथ करें। समर्थन बहुत अच्छा है (सभी आधुनिक ब्राउज़र, यहां तक ​​कि आईई)। कम्पास और एसएएसएस के साथ यह जल्दी से किया जाता है:

#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-transition.html


कलरब्लेंड प्लग ठीक वही करता है जो आप चाहते हैं

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

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

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


मुझे एक ही समस्या थी और इसे 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>

मुझे यह करने के लिए देरी () का उपयोग करना पसंद है, यहां एक उदाहरण दिया गया है:

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

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


मैंने एक संस्करण बनाया जो जीथ्यूब संस्करण के आधार पर आरजीबीए का समर्थन करता है। हालांकि, यह आईई में काम नहीं करेगा क्योंकि यह केवल आरजीबीए करता है। http://dl.dropbox.com/u/57502/jquery.color.js


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

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

   $('.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; 
   }

रंगीन प्लगइन यूआई लाइब्रेरी से केवल 4kb इतना सस्ता है। निस्संदेह आप प्लगइन के एक सभ्य संस्करण का उपयोग करना चाहेंगे, न कि कुछ छोटी गाड़ी पुरानी चीज जो सफारी को संभालती नहीं है और संक्रमण बहुत तेज़ होते हैं। चूंकि एक न्यूनतम संस्करण की आपूर्ति नहीं की जाती है, इसलिए आप विभिन्न कंप्रेसर का परीक्षण करना चाहेंगे और अपना स्वयं का न्यूनतम संस्करण बना सकते हैं । इस मामले में वाईयूआई को केवल 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);






jquery-animate