JQuery के साथ पीला फीका प्रभाव

Question

मैं 37Signals के पीले फीके प्रभाव के समान कुछ लागू करना चाहूंगा ।

मैं Jquery का उपयोग कर रहा हूँ 1.3.2

कोड

(function($) {
   $.fn.yellowFade = function() {
    return (this.css({backgroundColor: "#ffffcc"}).animate(
            {
                backgroundColor: "#ffffff"
            }, 1500));
   }
 })(jQuery);

और अगली कॉल शो पीक फीका के साथ बॉक्स आईडी के साथ पीला फीका ।

$("#box").yellowFade();

लेकिन यह केवल इसे पीला बनाता है। 15000 मिलीसेकंड के बाद कोई सफेद पृष्ठभूमि नहीं।

किसी भी विचार क्यों यह काम नहीं कर रहा है?

उपाय

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

$("#box").effect("highlight", {}, 1500);

लेकिन आपको शामिल करने की आवश्यकता होगी:

effect.core.js प्रभाव ।
highlight.js

Comments

हाइलाइट स्रोत यहाँ है: github.com/jquery/jquery-ui/blob/master/ui/…

— styfle

Answer 1

यह फ़ंक्शन jQuery के प्रभाव का हिस्सा है ।core.js :

$("#box").effect("highlight", {}, 1500);

जैसा कि स्टीयरिक ने टिप्पणियों में बताया, इस का उपयोग करने के लिए effects.core.js और effects.highlight.js को शामिल करने की आवश्यकता है।

Comments

मैंने jquery साइट में डेमो देखा docs.jquery.com/UI/Effects/Highlight#overview मैंने अपने कोड में कोशिश की है लेकिन कुछ भी नहीं करता है। क्या मुझे कोई अतिरिक्त डाउनलोड करने की आवश्यकता है। यह निर्भरता कहते हैं: प्रभाव कोर। यह एक और प्लगइन है।

— सर्जियो डेल एमो

सही उत्तर दें, लेकिन मैं सिर्फ उल्लेख करूंगा कि यह jQuery के प्रभाव में बनाया गया है ।core.js, चेतन के रूप में कोर jQuery फ़ाइल के लिए नहीं ()। बस यह स्पष्ट करने लायक था।

— स्टीयरिके

हेह, जैसा कि सर्जियो ने अभी तक स्पष्ट रूप से खोजा है ... हां सर्जियो, आपको इफेक्ट्स .कोर.जेएस फाइल और इफेक्ट्स शामिल करने की जरूरत है। हाईलाइट.जेएस (स्रोत की जांच यहां करें: docs.jquery.com/UI/Effects-Highlight )

— स्टीयरपाइक

यह jQuery यूआई में उपलब्ध है: docs.jquery.com/UI/Effects/Highlight#overview

— मैट स्किलिपोटी

पिछली टिप्पणियों के अपडेट के रूप में, अब आप effect.core.js और effects.highlight.js (और वे पुराने URL अब काम नहीं करते) शामिल हैं। इसे शामिल करने का नया तरीका jquery-ui लाइब्रेरी को शामिल करना है: code.jquery.com/ui/1.10.4/jquery-ui.min.js

— सीन कोलंबो

Answer 2

मुझे स्टर्लिंग निकोल्स जवाब पसंद था, क्योंकि यह हल्का था और इसे प्लगइन की आवश्यकता नहीं थी। हालांकि, मुझे पता चला कि यह फ्लोटिंग तत्वों (जैसे कि जब तत्व "फ्लोट: राइट") के साथ काम नहीं करता है। इसलिए मैंने हाइलाइट को ठीक से प्रदर्शित करने के लिए कोड को फिर से लिखा, कोई फर्क नहीं पड़ता कि तत्व पृष्ठ पर कैसे स्थित है:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999"
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

वैकल्पिक:
यदि आप तत्व के बॉर्डर-त्रिज्या से मेल खाना चाहते हैं तो निम्न कोड का उपयोग करें:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999",
            "border-top-left-radius": parseInt(el.css("borderTopLeftRadius"), 10),
            "border-top-right-radius": parseInt(el.css("borderTopRightRadius"), 10),
            "border-bottom-left-radius": parseInt(el.css("borderBottomLeftRadius"), 10),
            "border-bottom-right-radius": parseInt(el.css("borderBottomRightRadius"), 10)
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

Comments

मुझे यह समाधान पसंद है। तालिका पंक्तियों पर बढ़िया काम करता है।

— पेरी टिव

अब तक का सबसे अच्छा समाधान। यदि यह तत्व के सीमा त्रिज्या को भी कॉपी करेगा, तो यह कभी भी बेहतर होगा।

— स्टिजान वान बाल

@StijnVanBael कोड अब सीमा-त्रिज्या कॉपी करने के लिए अद्यतन किया गया। सुझाव के लिए धन्यवाद।

— डग एस

यह बहुत बढ़िया है, अब मेरे लिए यूआई लिब की कोई आवश्यकता नहीं है, लेकिन मेरा मुद्दा यह है कि यह मेरे पूरे डिव को पहले उपयोग पर प्रकाश नहीं डालेगा, शायद इसलिए इसका हिस्सा खाली है और इसे कहा जाने से पहले ही पाठ सेट हो जाता है?

— शरारती शरारती

अच्छा लगा, लेकिन यह FeatherlightJs जैसे मॉडल्स पर काम नहीं करता है।

— रयान

Answer 3

JQuery के इफ़ेक्ट लाइब्रेरी आपके ऐप में काफी हद तक अनावश्यक ओवरहेड जोड़ता है। आप केवल jQuery के साथ एक ही बात को पूरा कर सकते हैं। http://jsfiddle.net/x2jrU/92/

jQuery.fn.highlight = function() {
   $(this).each(function() {
        var el = $(this);
        el.before("<div/>")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": ".9"   
            })
            .fadeOut(500);
    });
}

$("#target").highlight();

Comments

धन्यवाद, यह बेहतर है और मैं ऐसी चीज की तलाश कर रहा था जिसके साथ मैं पूर्ण यूआई कोर को शामिल करने से बच सकता हूं जो पूरी तरह से अनावश्यक था।

— deej

आपने धमाल मचाया। वास्तव में मैं क्या देख रहा था, एक और प्लगइन जोड़कर। और मुझे यह पसंद है कि यह पूरे तत्व का एक वास्तविक ओवरले करता है, जैसा कि केवल तत्व पृष्ठभूमि रंग (जो पाठ, बटन, आदि द्वारा कवर किया जा सकता है) को बदलने के विपरीत है।

— डग एस

अद्यतन: यह कोड अक्सर फ़्लोटिंग तत्वों (यानी जब तत्व "फ्लोट: राइट") को उजागर करने की कोशिश में विफल हो जाएगा। इसलिए मैंने हाइलाइट को ठीक से प्रदर्शित करने के लिए कोड को फिर से लिखा, कोई फर्क नहीं पड़ता कि तत्व पृष्ठ पर कैसे स्थित है: stackoverflow.com/a/13106698/1145177

— डग एस

अपडेट डौग के लिए धन्यवाद .. मुझे अपने स्वयं के पुस्तकालयों को अपडेट करना होगा।

— स्टर्लिंग निकोल्स

अच्छा हल्के समाधान - वास्तव में अच्छी तरह से काम करता है। मैंने पाया मेरे हाइलाइट हालांकि तत्व गद्दी शामिल नहीं किया था, इसलिए मैं का इस्तेमाल किया .width(el.outerWidth())और .height(el.outerHeight())मेरी प्रपत्र फ़ील्ड्स के पूरे पर प्रकाश डाला।

— मार्क बी

Answer 4

अपने सीएसएस को निम्नानुसार परिभाषित करें:

@-webkit-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

@-moz-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

.yft {
    -webkit-animation: yellowfade 1.5s;
       -moz-animation: yellowfade 1.5s;
            animation: yellowfade 1.5s;
}

और कक्षा yftको किसी भी आइटम में जोड़ें$('.some-item').addClass('yft')

डेमो: http://jsfiddle.net/Q8KVC/528/

Answer 5

(function($) {
  $.fn.yellowFade = function() {
    this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
  }
})(jQuery);

चाल चलनी चाहिए। इसे पीले रंग के लिए सेट करें, फिर इसे सफेद करने के लिए फीका करें

Comments

जवाब के लिए धन्यवाद। हालांकि यह काम नहीं कर रहा है। लगता है चेतन कुछ नहीं करता।

— सर्जियो डेल एमो

आप किस संस्करण का उपयोग कर रहे हैं?

1.3.2। मैंने इसे अपने प्रश्न में जोड़ा

— सर्जियो डेल एमो

इसने मेरे उद्देश्यों के लिए अच्छी तरह से काम किया, वेनिला जॉकरी से परे कोई निर्भरता नहीं।

— gojomo

यह काम करने के लिए jQuery.Color () प्लगइन की आवश्यकता है: github.com/jquery/jquery-color

— Dia Kharrat

Answer 6

मैंने अभी जिस प्रॉजेक्ट पर काम कर रहा था, उस पर इसी तरह की समस्या का समाधान किया। डिफ़ॉल्ट रूप से, चेतन फ़ंक्शन रंगों को चेतन नहीं कर सकता है। JQuery के रंग एनिमेशन सहित प्रयास करें ।

यहाँ सभी उत्तर इस प्लगइन का उपयोग करते हैं लेकिन कोई भी इसका उल्लेख नहीं करता है।

Answer 7

वास्तव में, मेरे पास एक समाधान है जिसे केवल jQuery 1.3x की आवश्यकता है, और कोई एडिशननल प्लगइन नहीं।

सबसे पहले, अपनी स्क्रिप्ट में निम्नलिखित फ़ंक्शन जोड़ें

function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
    var delta = maxValue - minValue;
    var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
    return Math.ceil(stepp)
}

function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
    if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
    var actStep = 0;
    elem.bgFadeInt = window.setInterval(
        function() {
            elem.css("backgroundColor", "rgb("+
                easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
                easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
                easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")"
            );
            actStep++;
            if (actStep > steps) {
            elem.css("backgroundColor", finalColor);
            window.clearInterval(elem.bgFadeInt);
            }
        }
        ,intervals)
}

इसके बाद, फ़ंक्शन का उपयोग करके इसे कॉल करें:

doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 );

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

NB: फ़ायरफ़ॉक्स 3 और 6 पर परीक्षण किया गया है (हाँ यह उस पुरानी चीज़ पर भी काम करता है)

Answer 8

function YellowFade(selector){
   $(selector)
      .css('opacity', 0)
      .animate({ backgroundColor: 'Yellow', opacity: 1.0 }, 1000)
      .animate({ backgroundColor: '#ffffff', opacity: 0.0}, 350, function() {
             this.style.removeAttribute('filter');
              });
}

लाइन this.style.removeAttribute('filter')IE में एक एंटी-अलियासिंग बग के लिए है।

अब, जहाँ से भी YellowFade को कॉल करें, और अपने चयनकर्ता को पास करें

YellowFade('#myDivId');

क्रेडिट : फिल हैक में एक डेमो दिखाया गया था कि यह कैसे करना है। वह JQuery और ASPNet MVC पर एक डेमो कर रहा था।

इस वीडियो को देखें

अपडेट : क्या आपने वीडियो पर एक नज़र डाली? यह उल्लेख करना भूल गया कि JQuery.Color प्लगइन की आवश्यकता है

Comments

अगली त्रुटि फ़िल्टर लाइन द्वारा डाली जा रही है। मैं एक टेबल रो एलिमेंट (ट्र) में पीले रंग के फीके का उपयोग कर रहा हूँ "इस.स्टाइल.्रेमोव एट्रिब्यूट एक फंक्शन नहीं है [इस एरर पर ब्रेक] इस.स्टाइल.्रेमोव एट्रिब्यूट ('फिल्टर');"

— सर्जियो डेल एमो

Answer 9

मुझे बस 23kb मिलाने से नफरत थी। यह तत्व को 'फ़्लैश' करने के लिए fadeIn (जो स्वयं jQuery का हिस्सा है) का उपयोग करके व्यवहार का अनुकरण करता है:

$.fn.faderEffect = function(options){
    options = jQuery.extend({
        count: 3, // how many times to fadein
        speed: 500, // spped of fadein
        callback: false // call when done
    }, options);

    return this.each(function(){

        // if we're done, do the callback
        if (0 == options.count) 
        {
            if ( $.isFunction(options.callback) ) options.callback.call(this);
            return;
        }

        // hide so we can fade in
        if ( $(this).is(':visible') ) $(this).hide();

        // fade in, and call again
        $(this).fadeIn(options.speed, function(){
            options.count = options.count - 1; // countdown
            $(this).faderEffect(options); 
        });
    });
}

फिर इसे $ ('आइटम') के साथ कॉल करें। faderEffect ();

Comments

यह पीले फीके के समान नहीं है जिसे उपयोगकर्ता की आवश्यकता होती है।

— जॉन विंस्टनले

सही। मैं एक विकल्प या "कुछ इसी तरह" का सुझाव दे रहा हूं।

— कोरी

Answer 10

यह मेरी समस्या का समाधान है। यह उत्कृष्ट काम करता है। यह jslint त्रुटि सत्यापन पास करता है और IE8 और IE9 में भी सभ्य काम करता है। बेशक आप कलर कोड और कॉलबैक स्वीकार करने के लिए इसे ट्वीक कर सकते हैं:

jQuery.fn.highlight = function(level) {

  highlightIn = function(options){

    var el = options.el;
    var visible = options.visible !== undefined ? options.visible : true;

    setTimeout(function(){
      if (visible) {
        el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
        if (options.iteration/10 < 1) {
          options.iteration += 2;
          highlightIn(options);
        }
      } else {
        el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
        if (options.iteration/10 > 0) {
          options.iteration -= 2;
          highlightIn(options);
        } else {
          el.css('background-color', '#fff');
        }
      }
    }, 50);
  };

  highlightOut = function(options) {
    options.visible = false;
    highlightIn(options);
  };

  level = typeof level !== 'undefined' ? level : 'warning';
  highlightIn({'iteration': 1, 'el': $(this), 'color': level});
  highlightOut({'iteration': 10, 'el': $(this), 'color': level});
};

Comments

jQuery हाइलाइट में इसका क्या लाभ है? docs.jquery.com/UI/Effects/Highlight

— नाथन कोप

मेरे मामले में अच्छी तरह से मैं Jquery ui का उपयोग नहीं कर सका। तो मैं केवल Jquery के साथ एक समाधान फिक्सिंग के साथ छोड़ दिया गया था।

— कई

Answer 11

यह एक गैर- jQuery विकल्प है जिसका उपयोग आप रंग फीका प्रभाव के लिए कर सकते हैं। सरणी "रंग" में, आप संक्रमण के रंगों को जोड़ते हैं, जिन्हें आपको प्रारंभिक रंग से अंतिम रंग तक की आवश्यकता होती है। आप जितने चाहें उतने रंग जोड़ सकते हैं।

   <html lang="en">
   <head>
   <script type="text/javascript">
  //###Face Effect for a text box#######

var targetColor;
var interval1;
var interval2;
var i=0;
var colors = ["#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF"];

function changeColor(){
    if (i<colors.length){
        document.getElementById("p1").style.backgroundColor=colors[i];
        i++;
    } 
    else{
        window.clearInterval(interval1);
        i=0;
    }
}
addEventListener("load",function(){
    document.getElementById("p1").addEventListener("click",function(e){
        interval1=setInterval("changeColor()",80);              

    })
});
</script>

</head>

<body>
<p id="p1">Click this text box to see the fade effect</p>

<footer>
 <p>By Jefrey Bulla</p>
</footer>
</div>
</body>
</html> 

Answer 12

यदि आप एक वैकल्पिक पीली फीका तकनीक आज़माना चाहते हैं जो jQuery UI पर निर्भर नहीं करती है। तो कृपया, आप अपनी सामग्री के पीछे पीले (या किसी अन्य रंग) div को स्थिति दे सकते हैं और jQuery का उपयोग कर सकते हैं .fadeOut ()।

http://jsfiddle.net/yFJzn/2/

<div class="yft">
    <div class="content">This is some content</div>
    <div class="yft_fade">&nbsp;</div>
</div>

<style>
  .yft_fade {
      background-color:yellow;
      display:none;
  }
  .content {
      position:absolute;
      top:0px;
  }
</style>

<script>
  $(document).ready(function() {
      $(".yft").click(function() {
          $(this).find(".yft_fade").show().fadeOut();
      });
  });​
</script>

Answer 13

मैं बस इस्तेमाल किया ...

<style>
tr.highlight {
background: #fffec6;
}
</style>


<script>
//on page load, add class
$(window).load(function() {
$("tr.table-item-id").addClass("highlight", 1200);
}); 

//fade out class
setTimeout(function(){
$("tr.table-item-id").removeClass("highlight", 1200);   
}, 5200);

</script>

Answer 14

एक "पीली फीकी" के लिए एक सरल / कच्ची स्क्रिप्ट, स्वयं jquery के अलावा कोई प्लग-इन नहीं । टाइमर में आरजीबी (255,255, हाइलाइटकोल) के साथ पृष्ठभूमि सेट करना:

<script>

    $(document).ready(function () {
        yellowFadeout();
    });

    function yellowFadeout() {
        if (typeof (yellowFadeout.timer) == "undefined")
            yellowFadeout.timer = setInterval(yellowFadeout, 50);
        if (typeof (yellowFadeout.highlightColor) == "undefined")
            yellowFadeout.highlightColor = 0;
        $(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
        yellowFadeout.highlightColor += 10;
        if (yellowFadeout.highlightColor >= 255) {
            $(".highlight").css('background','');
            clearInterval(yellowFadeout.timer);
        }
    }
</script>