jQuery অ্যানিমেট ব্যাকগ্রাউন্ড কালার

327

আমি মাউসওভারে jQuery ব্যবহার করে ব্যাকগ্রাউন্ডে রঙ পরিবর্তন করার চেষ্টা করছি।

আমি কিছু উদাহরণ যাচাই করেছি এবং আমার কাছে এটি ঠিক আছে বলে মনে হচ্ছে, এটি হ'ল ফন্টসাইজের মতো অন্যান্য বৈশিষ্ট্যগুলির সাথে কাজ করে তবে ব্যাকগ্রাউন্ডের রঙের সাথে আমি পেয়েছি এবং "অবৈধ সম্পত্তি" জেএস ত্রুটি পেয়েছি। আমি যে উপাদানটির সাথে কাজ করছি তা হ'ল একটি ডিভ।

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

কোন ধারনা?

javascript  jquery  colors  jquery-animate 
— SteveCl
সূত্র
Jquery 1.4.2 এর সাথে jquery ইফেক্টের সাথে 1.8 আমাকে স্বীকার করতে হবে যে অ্যান্ড্রু সমাধানটি সম্পূর্ণ কাজ করে। নীচে তার পোস্ট দেখুন।
— প্যাট্রিক দেশজার্ডিন্স
1
দ্রষ্টব্য: এই প্লাগইনটি উপাদানটির বর্তমান পটভূমি রঙ সনাক্ত করছে - rgba(0, 0, 0, 0)কোনও ব্যাকগ্রাউন্ড বর্ণ সংজ্ঞায়িত না হলে ক্রোম ব্রাউজার প্রত্যাশিত খালি / নাল মানটির পরিবর্তে প্রত্যাবর্তন করে। এটি "ঠিক" করতে, উপাদানটির প্রাথমিক ব্যাকগ্রাউন্ডের রঙ থাকতে হবে।
— শেডো উইজার্ড আপনার জন্য
লিঙ্কযুক্ত পৃষ্ঠাটি ভাঙা মনে হচ্ছে (কমপক্ষে প্রকল্পের পৃষ্ঠা এবং ডেমো পৃষ্ঠা)।
— পাওলো স্টেফান

উত্তর:

333

রঙিন প্লাগইনটি ইউআই লাইব্রেরির চেয়ে মাত্র 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);
— অ্যান্ড্রু
সূত্র
2
ঠিক আছে, অ্যান্ড্রু প্রস্তাব লিঙ্কে যান। ফাইলটি ডাউনলোড করুন। আপনার এটি আপনার প্রকল্পে যুক্ত করা দরকার। আপনার প্রকল্পে এখনও jquery.effects.core থাকতে পারে এটি পুরোপুরি কাজ করবে। উত্তরের জন্য ধন্যবাদ. +1
— প্যাট্রিক দেশজার্ডিন্স
3
আমি উপরেরটি কেবল আমার বিদ্যমান 'jquery-ui-1.8.2.min.js' ফাইলটিতে আটকিয়েছি এবং ... সবকিছু এখনও কাজ করেছে :-)
— ডেভ এভারিট
7
আমি লক্ষ করতে চাই, গত বছরে (২০১১) এই প্লাগইনটির লেখক একটি সংস্করণ 2 প্রকাশ করেছেন যার মধ্যে এতে অনেকগুলি সুন্দর বৈশিষ্ট্য রয়েছে, তবে এই লিবটি সাধারণত কার্যকরীভাবে কার্যকর করার জন্য প্রয়োজনীয় হয় না। এটি এখন 20 + কেবি বড়। v1পুরানো সংস্করণটি পেতে শাখাটি নির্বাচন করতে পারেন (যা এখনও কাজ করে) তবে এটির ওজন অনেক বেশি।
— আরেন
6
এফডব্লিউআইডাব্লু - আপনি কোডের রঙ-থেকে-আরজিবি ম্যাপিংগুলি সরাতে এবং আরও আকার হ্রাস করতে পারেন: Raw.github.com/gist/1891361/… । ক্ষতিটি হ'ল আপনি অ্যানিমেশনের জন্য রঙের নাম ব্যবহার করতে পারবেন না। আপনাকে আরজিবি মান ব্যবহার করতে হবে।
— নিয়াজ
4
jQuery 1.8 বিটিডব্লুতে এই প্লাগটি ভাঙে। কারCSS আর jQuery তে নেই।
— ধনী ব্র্যাডশো
68

আমার একই সমস্যা ছিল এবং 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>
— menardmam
সূত্র
61

এটি CSS3-Transitions দিয়ে করুন with সমর্থন দুর্দান্ত (সমস্ত আধুনিক ব্রাউজার এমনকি আইই)। কম্পাস এবং 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-transition.html

— volf
সূত্র
6
সঙ্গে বেহালার হোভার এবং ক্লিক এ ট্রানজিশন: jsfiddle.net/K5Qyx
— ডেমোক্রাটিক Pilafian
30

বিটস্টর্মটিতে আমি দেখেছি সেরা জ্যাকুয়ের রঙ অ্যানিমেশন প্লাগইন রয়েছে। এটি jquery রঙ প্রকল্পের উন্নতি। এটি আরজিবা সমর্থন করে।

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

— এমানুয়েল
সূত্র
1
আমি 'আরজিবা' সমর্থন করে যা আমি ঠিক যা খুঁজছিলাম তা সমর্থন করার জন্য আমি আপনাকে যথেষ্ট ধন্যবাদ জানাতে পারি না
— ওনিমুশা
13

আপনি এই কার্যকারিতা যুক্ত করতে 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 রূপান্তর সমর্থন করে কিনা তা সন্ধানের জন্য মডার্নজার ব্যবহার করতে পারেন, যদি তা না হয় তবে আপনি জিকুয়েরিকে ফালব্যাক হিসাবে ব্যবহার করতে পারেন:

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

কোনও নতুন শুরু করার আগে বর্তমান অ্যানিমেশনটি বন্ধ করতে স্টপ () ব্যবহারের কথা মনে রাখবেন অন্যথায় আপনি যখন খুব দ্রুত উপাদানটির উপর দিয়ে যান, তখন প্রভাবটি কিছুক্ষণ ঝলকিয়ে চলে keeps

— ফারাজ কেলহিনী
সূত্র
11

যে কেউ এটি সন্ধান করছে। JQuery UI সংস্করণ ব্যবহার করা আপনার আরও ভাল কারণ এটি সমস্ত ব্রাউজারে কাজ করে। রঙিন প্লাগইনটিতে সাফারি এবং ক্রোমের সমস্যা রয়েছে। এটি কেবল কখনও কখনও কাজ করে।

— ডনি ভি।
সূত্র
6
-1 রঙিন প্লাগইনের সর্বশেষতম সংস্করণ Chrome এ পুরোপুরি কাজ করে।
— অ্যান্ড্রু
3
এটা ঠিক সজীব পটভূমি অতিরিক্ত স্ক্রিপ্ট অন্তর্ভুক্ত করা ভারী
— oneiros
11

আপনি 2 ডিভ ব্যবহার করতে পারেন:

আপনি এটির উপরে একটি ক্লোন রাখতে পারেন এবং ক্লোনটি ফেইড করার সময় আসলটি ম্লান করতে পারেন।

বিবর্ণ হয়ে গেলে, নতুন বিজি দিয়ে আসলটি পুনরুদ্ধার করুন।

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

jsFood উদাহরণ


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

— পিটার আজতাই
সূত্র
সম্ভবত এটি কোনও সময়ে কাজ করেছিল, কমপক্ষে ঠিক এটির থেকে প্রত্যাশিত যা করা হয় তা মনে হয় না।
— epeleg
@ পেলেগ - আমার জন্য ম্যাক ক্রোমে কাজ করে। আপনি রঙিন আয়তক্ষেত্রটিতে ক্লিক করুন, এবং এটি রঙ পরিবর্তন করে (2013 - 07 - 15)
— পিটার আজতাই
আমি জানি না কীভাবে তবে এখন এটি আমার উইন্ডোজ 7 ক্রোমে কাজ করে। ক্রোম আপডেটের সাথে সম্পর্কিত হতে পারি আমি ইস্টেরডে করেছিলাম ?! যাইহোক আমি যেমন সত্যিই বলেছি এটি এখন কাজ করে।
— elegleg
8

পছন্দসই প্রভাবের জন্য আমি জিকুয়ারির সাথে সিএসএস রূপান্তরগুলির সংমিশ্রণ ব্যবহার করেছি; স্পষ্টতই ব্রাউজারগুলি সিএসএস রূপান্তর সমর্থন করে না তবে এটির একটি হালকা বিকল্প যা বেশিরভাগ ব্রাউজারগুলির জন্য এবং আমার প্রয়োজনীয়তার জন্য ভাল কাজ করে তা গ্রহণযোগ্য অবনতি।

পটভূমির রঙ পরিবর্তন করতে জিকিউরি: 

   $('.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; 
   }
— জিম্বো জোন্স
সূত্র
6

এই দিনগুলিতে 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]
— рüффп
সূত্র
1
আপনি দয়া করে উত্স উদ্ধৃত করতে পারেন? বিটিডাব্লু তালিকা করার জন্য ধন্যবাদ।
— শ্রীকান্ত শরৎ 12
এই তালিকাটি jQuery রঙ প্লাগইন থেকে এসেছে: প্লাগইনস.জকোরি
— প্রজেক্ট /
2
-1 আপনার রঙের তালিকাটি একটি পুরানো সংস্করণকে বোঝায়। বর্তমান সংস্করণে কমপক্ষে একটি অতিরিক্ত রঙ রয়েছে যা আমি লক্ষ্য করেছি।
— অ্যান্ড্রু
5

আমি এটি করতে দেরি () ব্যবহার করতে চাই, এখানে একটি উদাহরণ দেওয়া হয়েছে:

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

এটি একটি ফাংশন দ্বারা কল করা যেতে পারে, "উপাদান" উপাদান শ্রেণি / নাম / ইত্যাদি সহ being উপাদানটি তাত্ক্ষণিকভাবে # এফসিএফসিডি 8 ব্যাকগ্রাউন্ডের সাথে উপস্থিত হবে, এক সেকেন্ড ধরে ধরে রাখবে, তারপরে #EFEAEA এ বিবর্ণ হবে।

— অ্যান্ডি
সূত্র
4

কেবল আপনার সিকিউরিটি স্ক্রিপ্টটি নীচে স্নিপেট যুক্ত করুন এবং উপভোগ করুন:

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

উদাহরণ দেখুন

আরও তথ্যের জন্য রেফারেন্স

— Darush
সূত্র
উদাহরণগুলি ইনলাইন করুন যাতে তারা লিঙ্ক-পচায় প্রবণ না হয়।
— এজকান
2

আমি একই পৃষ্ঠাটি নিয়ে এই পৃষ্ঠায় হোঁচট খেয়েছি তবে নিম্নলিখিত সমস্যাগুলি:

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

উপরেরটি একটি অস্থায়ী ডিভ তৈরি করে যা দস্তাবেজের প্রবাহে কখনও স্থাপন করা হয় না। আমি তখন সেই উপাদানটির একটি সংখ্যাসম্য সম্পত্তি অ্যানিমেট করার জন্য jQuery এর অন্তর্নির্মিত অ্যানিমেশনটি ব্যবহার করি - এই ক্ষেত্রেwidth - যা শতাংশ (0 থেকে 100) উপস্থাপন করতে পারে an তারপরে, পদক্ষেপ ফাংশনটি ব্যবহার করে, আমি এই সংখ্যাসূচক অ্যানিমেশনটিকে একটি সাধারণ হেক্স ক্যাক্লুয়েশন সহ পাঠ্য রঙে স্থানান্তর করি।

একই সাথে অর্জন করা যেতে পারে setIntervalতবে এই পদ্ধতিটি ব্যবহার করে আপনি jQuery এর অ্যানিমেশন পদ্ধতিগুলি - যেমন .stop()- এবং আপনি ব্যবহার করতে পারেন easingএবংduration ।

স্পষ্টতই এটি কেবল সাধারণ রঙের বিবর্ণগুলির জন্য ব্যবহারযোগ্য, আরও জটিল রঙিন রূপান্তরগুলির জন্য আপনাকে উপরের উত্তরগুলির মধ্যে একটি ব্যবহার করতে হবে - বা আপনার নিজের রঙের বিবর্ণ গণিত কোড করুন :)

— Pebbl
সূত্র
2

আর একবার চেষ্টা কর:

(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-color.aspx

— সাময়িক পত্রিকা
সূত্র
1

কালার ব্লেন্ড প্লাগ ইন আপনার যা ইচ্ছা ঠিক তা করে

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

এখানে আমার হাইলাইট কোডটি

$("#container").colorBlend([{
    colorList:["white",  "yellow"], 
    param:"background-color",
    cycles: 1,
    duration: 500
}]);
— Orhaan
সূত্র
1

আপনি যদি কেবলমাত্র মূল 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 : ''});
            });
        });
— user1029978
সূত্র
0

এটি ব্যবহার করার চেষ্টা করুন

-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
— আন্তন রডিন
সূত্র
0

আর একবার চেষ্টা কর:

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");
    });
});
— মেরি ডেইজি সানচেজ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.