आप jquery का उपयोग करते हुए पृष्ठभूमि रंग में / बाहर कैसे फीका करते हैं?

Question 1

मैं jQuery के साथ पाठ सामग्री में कैसे फीका करूँ?

संदेश के लिए उपयोगकर्ता का ध्यान आकर्षित करने के लिए बिंदु है।

Question 2

यह सटीक कार्यक्षमता (एक संदेश को उजागर करने के लिए 3 सेकंड की चमक) हाइलाइट प्रभाव के रूप में jQuery यूआई में लागू की गई है

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

रंग और अवधि परिवर्तनशील हैं

Question 3

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

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

jQueryUI में कुछ अंतर्निहित प्रभाव होते हैं जो आपके लिए भी उपयोगी हो सकते हैं।

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

Question 4

मुझे पता है कि सवाल यह था कि यह कैसे Jquery के साथ किया जाना था, लेकिन आप साधारण सीएसएस के साथ एक ही प्रभाव को प्राप्त कर सकते हैं और थोड़ा सा jquery ...

उदाहरण के लिए, आपके पास 'बॉक्स' वर्ग के साथ एक div है, निम्नलिखित सीएसएस जोड़ें

.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;
}

और फिर AddClass फ़ंक्शन का उपयोग करके अलग-अलग पृष्ठभूमि रंग के साथ 'बॉक्स हाइलाइट किया गया' या निम्न सीएसएस के साथ ऐसा कुछ जोड़ें:

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

मैं एक शुरुआत हूं और शायद इस पद्धति के कुछ नुकसान हैं, लेकिन शायद यह किसी के लिए उपयोगी होगा

यहाँ एक कोडपेन है: https://codepen.io/anon/pen/baaLYB

Question 5

आमतौर पर आप .animate () विधि का उपयोग मनमाने ढंग से CSS गुणों में हेरफेर करने के लिए कर सकते हैं , लेकिन पृष्ठभूमि रंग के लिए आपको रंग प्लगइन का उपयोग करने की आवश्यकता होती है । एक बार जब आप इस प्लगइन को शामिल कर लेते हैं, तो आप कुछ का उपयोग कर सकते हैं जैसे कि दूसरों ने $('div').animate({backgroundColor: '#f00'})रंग बदलने का संकेत दिया है।

जैसा कि अन्य लोगों ने लिखा है, इसमें से कुछ को jQuery UI लाइब्रेरी के साथ भी इस्तेमाल किया जा सकता है।

Question 6

केवल jQuery (कोई UI लाइब्रेरी / प्लगइन) का उपयोग करना। यहां तक कि 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

आपके ब्राउज़र समर्थन के आधार पर, आप एक css एनीमेशन का उपयोग कर सकते हैं। ब्राउज़र का समर्थन IE10 और सीएसएस एनीमेशन के लिए है। यह अच्छा है, इसलिए आपको jquery UI निर्भरता को जोड़ने की ज़रूरत नहीं है अगर इसका केवल एक छोटा सा अंडा अंडा हो। यदि यह आपकी साइट (आईई 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;}
}

अगला एक jQuery क्लिक ईवेंट बनाएं जो उस 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 आरजीबी तत्व (नीला) के साथ 255 से कम पर शुरू होने से एक पीला हाइलाइट होता है। फिर मान 10+को सेट करने var unBlueमें शून्य से 255 तक पहुंचने पर नीले रंग में वृद्धि होती है।