div पर jQuery "निमिष हाइलाइट" प्रभाव?

Question 1

मैं निम्नलिखित करने के लिए एक रास्ता खोज रहा हूँ।

मैं <div>एक पृष्ठ में एक जोड़ देता हूं , और एक अजाक्स कॉलबैक कुछ मूल्य देता है। <div>Ajax कॉल से मूल्यों से भर जाता है, और <div>फिर एक और के लिए prepended है <div>, जो एक तालिका स्तंभ के रूप में कार्य करता है।

मैं उपयोगकर्ता का ध्यान आकर्षित करना चाहता हूं, उसे यह दिखाने के लिए कि पृष्ठ पर कुछ नया है।
मैं <div>कुछ समय के लिए पलक झपकना, दिखाना / छिपाना नहीं चाहता , लेकिन कुछ सेकंड के लिए हाइलाइट / अनहेल्दी करना चाहता हूं।

मैं ब्लिंक प्लगइन को देख रहा हूं, लेकिन जहां तक मैं देख सकता हूं यह केवल एक तत्व को दिखाता / छिपाता है।

Btw, समाधान को क्रॉस-ब्राउज़र होना चाहिए, और हां, IE दुर्भाग्य से शामिल है। मुझे शायद IE में काम करने के लिए थोड़ा हैक करना होगा, लेकिन कुल मिलाकर इसे काम करना होगा।

Question 2

jQuery UI हाइलाइट प्रभाव वह है जो आप खोज रहे हैं।

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

प्रलेखन और डेमो यहाँ पाया जा सकता है

संपादित करें :
शायद jQuery यूआई पल्सेट प्रभाव अधिक उपयुक्त है, यहां देखें

# 2 संपादित करें :
आप यह कर सकते थे अस्पष्टता को समायोजित करने के लिए:

$("div").click(function() {
  // do fading 3 times
  for(i=0;i<3;i++) {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});

... तो यह किसी भी 50% अस्पष्टता से कम नहीं जाएगा।

Question 3

Http://jqueryui.com/demos/effect/ पर एक नज़र डालें । यह स्पंदित नाम का एक प्रभाव है जो वास्तव में आप चाहते हैं।

$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});

Question 4

यह एक कस्टम ब्लिंक इफ़ेक्ट है जो मैंने बनाया है, जो उपयोग करता है setIntervalऔरfadeTo

HTML -

<div id="box">Box</div>

जेएस -

setInterval(function(){blink()}, 1000);


    function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }

जितना सरल हो जाता है।

http://jsfiddle.net/Ajey/25Wfn/

Question 5

यदि आप पहले से ही Jquery UI लाइब्रेरी का उपयोग नहीं कर रहे हैं और आप उस प्रभाव की नकल करना चाहते हैं जो आप कर सकते हैं तो यह बहुत सरल है

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

आप अपने डिज़ाइन को बेहतर तरीके से फिट करने के लिए तेज़ या धीमी गति प्राप्त करने के लिए संख्याओं के साथ भी खेल सकते हैं।

यह एक वैश्विक jquery फ़ंक्शन भी हो सकता है ताकि आप साइट पर समान प्रभाव का उपयोग कर सकें। यह भी ध्यान दें कि यदि आप इस कोड को लूप के लिए रखते हैं तो आपके पास 1 मिलियन दाल हो सकती है, इसलिए आप डिफ़ॉल्ट 6 या डिफ़ॉल्ट कितना सीमित नहीं हैं।

संपादित करें: इसे एक वैश्विक jQuery फ़ंक्शन के रूप में जोड़ना

$.fn.Blink = function (interval = 100, iterate = 1) {
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);
}

निम्नलिखित का उपयोग करके अपनी साइट से किसी भी तत्व को आसानी से ब्लिंक करें

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

Question 6

उन लोगों के लिए जो संपूर्ण jQuery UI को शामिल नहीं करना चाहते हैं, आप इसके बजाय jQuery.pulse.js का उपयोग कर सकते हैं ।

बदलती अस्पष्टता के पाश एनीमेशन के लिए, यह करें:

$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});

यह हल्का (1kb से कम) है, और आपको किसी भी प्रकार के एनिमेशन को लूप करने की अनुमति देता है।

Question 7

आप jQuery UI में देखना चाहते हैं। विशेष रूप से, हाइलाइट प्रभाव:

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

Question 8

चूँकि मुझे कोई jQuery आधारित समाधान नहीं दिख रहा है, जिसके लिए यहाँ अतिरिक्त पुस्तकालयों की आवश्यकता नहीं है, एक साधारण एक है जो fadeIn / fadeOut का उपयोग करने वालों की तुलना में थोड़ा अधिक लचीला है।

$.fn.blink = function (count) {
    var $this = $(this);

    count = count - 1 || 0;

    $this.animate({opacity: .25}, 100, function () {
        $this.animate({opacity: 1}, 100, function () {
            if (count > 0) {
                $this.blink(count);
            }
        });
    });
};

इसे इस तरह इस्तेमाल करें

$('#element').blink(3); // 3 Times.

Question 9

मैं विभिन्न पूर्वनिर्धारित रंगों का उपयोग करता हूं जैसे:

theme = {
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
};

और उन्हें इस तरह का उपयोग करें

$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);

आसान :)

Question 10

यदि आप jQuery UI का ओवरहेड नहीं चाहते हैं, तो मैंने हाल ही में एक पुनरावर्ती समाधान का उपयोग करके लिखा है .animate()। आप आवश्यकतानुसार विलंब और रंगों को अनुकूलित कर सकते हैं।

function doBlink(id, count) {
    $(id).animate({ backgroundColor: "#fee3ea" }, {
        duration: 100, 
        complete: function() {

            // reset
            $(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
                duration: 100,
                complete: function() {

                    // maybe call next round
                    if(count > 1) {
                        doBlink(id, --count);
                    }
                }
            });

        }
    });
}

बेशक आप के backgroundColorसाथ काम करने के लिए रंग प्लगइन की आवश्यकता होगी .animate()। https://github.com/jquery/jquery-color

और थोड़ा संदर्भ प्रदान करने के लिए यह है कि मैंने इसे कैसे कहा। मुझे अपने लक्ष्य div पर पृष्ठ को स्क्रॉल करने और फिर उसे ब्लिंक करने की आवश्यकता थी।

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});

Question 11

मुझे लगता है कि आप मेरे द्वारा दिए गए उत्तर का उपयोग कर सकते हैं। आप इसे यहाँ पा सकते हैं ... https://stackoverflow.com/a/19083993/2063096

सभी ब्राउज़रों पर काम करना चाहिए क्योंकि यह केवल जावास्क्रिप्ट और jQuery है।

नोट: इस समाधान में jQuery UI का उपयोग नहीं किया गया है, एक बेला भी है जिससे आप इसे अपने कोड में लागू करने से पहले अपनी पसंद के अनुसार खेल सकते हैं।

Question 12

बस elem.fadeOut (10) .fadeIn (10) दें;

Question 13

Jquery.blink.js प्लगइन के साथ प्रयास करें:

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>

<script>
jQuery('span').blink({color:'white'}, {color:'black'}, 50);
</script>

#का आनंद लें!

Question 14

<script>
$(document).ready(function(){
    var count = 0;
    do {
        $('#toFlash').fadeOut(500).fadeIn(500);
        count++;
    } while(count < 10);/*set how many time you want it to flash*/
});
</script

Question 15

इसे देखें -

<input type="button" id="btnclick" value="click" />
var intervalA;
        var intervalB;

        $(document).ready(function () {

            $('#btnclick').click(function () {
                blinkFont();

                setTimeout(function () {
                    clearInterval(intervalA);
                    clearInterval(intervalB);
                }, 5000);
            });
        });

        function blinkFont() {
            document.getElementById("blink").style.color = "red"
            document.getElementById("blink").style.background = "black"
            intervalA = setTimeout("blinkFont()", 500);
        }

        function setblinkFont() {
            document.getElementById("blink").style.color = "black"
            document.getElementById("blink").style.background = "red"
            intervalB = setTimeout("blinkFont()", 500);
        }

    </script>

    <div id="blink" class="live-chat">
        <span>This is blinking text and background</span>
    </div>

Question 16

मुझे ठीक-ठीक पता नहीं था कि मैं जो कुछ लिख रहा था, वह उतना ही बुनियादी था जितना कि मैं इसे बना सकता था। हाइलाइटेड क्लास सिर्फ बैकग्राउंड कलर हो सकता है।

var blinking = false; // global scope

function start_blinking() {
    blinking = true;
    blink();
}

function stop_blinking() {
    blinking = false;
}

function blink(x=0) {
    $("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping

    if (blinking) {
        if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x
        setTimeout(function(){blink(++x)},500); // increment x and recurse
    }
}