আপনি jquery ব্যবহার করে কোনও পটভূমির রঙ ফিকে / আউট করবেন কীভাবে?

Question 1

আমি কীভাবে jQuery এর সাহায্যে পাঠ্য সামগ্রী নষ্ট করব?

বিষয়টি হ'ল বার্তাটির প্রতি ব্যবহারকারীর দৃষ্টি আকর্ষণ করা।

Question 2

এই সঠিক কার্যকারিতা (একটি বার্তা হাইলাইট করতে 3 সেকেন্ডের গ্লো) হাইলাইট প্রভাব হিসাবে jQuery UI তে প্রয়োগ করা হয়েছে

https://api.jqueryui.com/hightlight-effect/

রঙ এবং সময়কাল পরিবর্তনশীল

Question 3

আপনি যদি কোনও উপাদানটির ব্যাকগ্রাউন্ড রঙ নির্দিষ্টভাবে অ্যানিমেট করতে চান তবে আমি বিশ্বাস করি যে আপনাকে jQueryUI ফ্রেমওয়ার্ক অন্তর্ভুক্ত করতে হবে। তারপরে আপনি এটি করতে পারেন:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI এর কিছু বিল্ট-ইন এফেক্ট রয়েছে যা আপনার পক্ষেও কার্যকর হতে পারে।

http://jqueryui.com/demos/effect/

Question 4

আমি জানি যে প্রশ্নটি জ্যাকুরির সাথে এটি কীভাবে করা যায় তবে আপনি সাধারণ সিএসএস এবং কেবল কিছুটা jquery দিয়ে একই প্রভাব অর্জন করতে পারেন ...

উদাহরণস্বরূপ, 'বাক্স' শ্রেণীর সাথে আপনার একটি ডিভ রয়েছে, নিম্নলিখিত সিএসএস যুক্ত করুন

.box {
background-color: black;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}

এবং তারপরে অ্যাডক্লাস ফাংশনটি বিভিন্ন ব্যাকগ্রাউন্ড রঙের মতো 'বাক্স হাইলাইটেড' বা নিম্নলিখিত সিএসএসের সাথে অন্য কিছু যুক্ত করতে যুক্ত করুন:

.box.highlighted {
  background-color: white;
}

আমি একজন শিক্ষানবিস এবং সম্ভবত এই পদ্ধতির কিছু অসুবিধা রয়েছে তবে এটি কারও পক্ষে সহায়ক হবে

এখানে একটি কোডেন: https://codepen.io/anon/pen/baaLYB

Question 5

সাধারণত আপনি নির্বিচারে সিএসএস বৈশিষ্ট্যগুলি পরিচালনা করতে .animate () পদ্ধতিটি ব্যবহার করতে পারেন , তবে পটভূমির রঙগুলির জন্য আপনাকে রঙিন প্লাগইন ব্যবহার করতে হবে । একবার আপনি এই প্লাগইনটি অন্তর্ভুক্ত করার পরে, আপনি অন্যরা যেমন সূচিত করেছেন তেমন কিছু ব্যবহার করতে পারেন$('div').animate({backgroundColor: '#f00'}) রঙ পরিবর্তন করার জন্য ।

অন্যরা যেমন লিখেছেন, এর কিছু jQuery UI লাইব্রেরি ব্যবহার করেও করা যেতে পারে।

Question 6

শুধুমাত্র jQuery ব্যবহার করে (কোনও ইউআই লাইব্রেরি / প্লাগইন নেই)। এমনকি jQuery সহজেই নির্মূল করা যেতে পারে

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

ডেমো: http://jsfiddle.net/5NB3s/2/

সেটটাইমআউট 50% থেকে 100% থেকে স্বচ্ছতা বৃদ্ধি করে মূলত ব্যাকগ্রাউন্ডকে সাদা করে তোলে (আপনি আপনার রঙের উপর নির্ভর করে যে কোনও মান চয়ন করতে পারেন)।
লুপে সঠিকভাবে কাজ করার জন্য সেটটাইমআউট একটি বেনামে ফাংশনে আবৃত হয় ( কারণ )

Question 7

আপনার ব্রাউজার সমর্থনের উপর নির্ভর করে আপনি একটি সিএসএস অ্যানিমেশন ব্যবহার করতে পারেন। ব্রাউজার সমর্থন আইএস 10 এবং সিএসএস অ্যানিমেশনের জন্য। এটি দুর্দান্ত তাই আপনাকে যদি জিকিউরি ইউআই নির্ভরতা যুক্ত করতে না হয় তবে এটি যদি কেবলমাত্র একটি ছোট ইস্টার ডিম। যদি এটি আপনার সাইটের সাথে অবিচ্ছেদ্য হয় (আইফ 9 এবং নীচের জন্য ওরফে প্রয়োজন) jquery UI সমাধান সহ যান।

.your-animation {
    background-color: #fff !important;
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}

এরপরে একটি জিকিউরি ক্লিক ইভেন্ট তৈরি করুন যা your-animationআপনার প্রাণবন্ত করতে চান এমন উপাদানটিতে ক্লাস যুক্ত করে , একটি রঙ থেকে অন্য রঙে ব্যাকগ্রাউন্ড বিবর্ণ হয়ে ট্রিগার করে:

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

Question 8

এর অনুরূপ কিছু অর্জন করতে আমি একটি সুপার সিম্পল jQuery প্লাগইন লিখেছি। আমি সত্যিই কিছুটা হালকা ওজন চাইছিলাম (এটি 732 বাইট কমিয়ে দেওয়া হয়েছে), তাই একটি বড় প্লাগইন বা ইউআই সহ আমার কাছে প্রশ্ন থেকে যায়। এটি এখনও প্রান্তের চারপাশে কিছুটা রুক্ষ, সুতরাং প্রতিক্রিয়াটি স্বাগত।

আপনি এখানে প্লাগইন চেকআউট করতে পারেন: https://gist.github.com/4569265 ।

প্লাগইনটি ব্যবহার করে, ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করে এবং তারপরে setTimeoutমূল ব্যাকগ্রাউন্ডের রঙ ফিকে হয়ে যাওয়ার জন্য প্লাগইনটি ফায়ার করতে একটি সাধারণ বিষয় হবে ।

Question 9

কেবল সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করে 2 টি রঙের মধ্যে বিবর্ণ করতে:

function Blend(a, b, alpha) {
  var aa = [
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
    ];

  var bb = [
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
    ];

  r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
  g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
  b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);

  return '#'
        + r.substring(r.length - 2)
        + g.substring(g.length - 2)
        + b.substring(b.length - 2);
}

function fadeText(cl1, cl2, elm){
  var t = [];
  var steps = 100;
  var delay = 3000;

  for (var i = 0; i < steps; i++) {
    (function(j) {
         t[j] = setTimeout(function() {
          var a  = j/steps;
          var color = Blend(cl1,cl2,a);
          elm.style.color = color;
         }, j*delay/steps);
    })(i);
  }

  return t;
}

var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T  = fadeText(cl1,cl2,elm);

সূত্র: http://www.pagecolumn.com/javascript/fade_text.htm

Question 10

জাভাস্ক্রিপ্ট jQuery বা অন্যান্য লাইব্রেরি ছাড়াই সাদা হয়ে যায়:

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

মুদ্রণ ক্ষেত্রে, হলুদ বিয়োগ নীল, সুতরাং 255 এরও কম সময়ে 3 য় আরজিবি উপাদান (নীল) দিয়ে শুরু করে হলুদ হাইলাইট দিয়ে শুরু হয়। তারপরে মানটি 10+নির্ধারণের ক্ষেত্রে var unBlueবিয়োগ নীল 255 না হওয়া পর্যন্ত বৃদ্ধি হয়।