আপনি কীভাবে jQuery এ একটি উপাদান "ফ্ল্যাশ" তৈরি করেন


249

আমি jQuery এ একেবারে নতুন এবং প্রোটোটাইপ ব্যবহার করে কিছু অভিজ্ঞতা অর্জন করেছি। প্রোটোটাইপে একটি উপাদান "ফ্ল্যাশ" করার পদ্ধতি রয়েছে - যেমন ie সংক্ষিপ্তভাবে এটিকে অন্য রঙে হাইলাইট করুন এবং এটিকে স্বাভাবিক অবস্থায় ফেইস করে দিন যাতে ব্যবহারকারীর দৃষ্টি আকর্ষণ হয়। JQuery এ কি কোনও পদ্ধতি আছে? আমি fadeIn, fadeOut এবং অ্যানিমেট দেখতে পাচ্ছি, কিন্তু আমি "ফ্ল্যাশ" এর মতো কিছুই দেখতে পাচ্ছি না। সম্ভবত এই তিনটির মধ্যে একটিতে উপযুক্ত ইনপুট ব্যবহার করা যেতে পারে?


4
এই ওপি উত্তর না, কিন্তু (ঢিলেঢালাভাবে পরীক্ষিত) কোড ভবিষ্যতে গুগল অনুসন্ধানকারীরা (যেমন নিজেকে হিসাবে) জন্য উপযোগী হতে পারে:$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };
কোরি Mawhorter

3
উপাদানটিতে এই সিএসএস যুক্ত করুন:, text-decoration:blinkতারপরে এটি সরান।
ডেমেন্টিক


আমি এখানে একটি জেএসফিডাল ডেমো রেখেছি যা আমি মনে করি যে এই পৃষ্ঠায় আমি যেটি পেয়েছি তার চেয়ে ভাল উত্তর: stackoverflow.com/a/52283660/470749
রায়ান

দয়া করে নোট করুন যে পলকটি অ্যানিমেশনগুলির পক্ষে আনুষ্ঠানিকভাবে হ্রাস পেয়েছে। চেক করুন: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
অরিজগ

উত্তর:


317

আমার উপায় .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);


14
সর্বাধিক সুন্দর সমাধান নয়, তবে সংক্ষিপ্ত, সহজেই বোঝা যায় এবং এর জন্য ইউআই / এফেক্টের প্রয়োজন হয় না। নিস!
ক্রিস জয়েস

21
আমি ফেইডইন, ফিডআউট ক্রম, এর আগে কিছুটা বিলম্ব ব্যবহার করি $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
ঝলকানি ব্যাকগ্রাউন্ডগুলি প্রায়শই অদ্ভুত দেখায় বা কেবল প্লেইন জারিং - বিশেষত যদি আপনি যে আইটেমটি ফ্ল্যাশ করছেন তা সাধারণ সাদা পটভূমিতে বসে আছে। রঙিন প্লাগইন যুক্ত করার আগে এবং ব্যাকগ্রাউন্ড ইত্যাদি ফ্ল্যাশ করার চেষ্টা করার আগে প্রথমে এটি চেষ্টা করুন
সাইমন_উইভার

4
এই পদ্ধতির সমস্যা হ'ল এই ঘটনাগুলি একে অপরের দিকে ঝুঁকির সম্ভাবনা। আপনার সম্ভবত পরবর্তী প্রতিটি fadeIn এবং fadeOut তাদের নিজ নিজ কলব্যাকে রাখা উচিত। উদাহরণস্বরূপ: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

বৈধতা কোডটিতে এটি ব্যবহার করুন যা ঘন ঘন বলা হতে পারে Be কোডটি যদি সঠিক সময়ের সাথে ডাকা হয় তবে আপনি যখন কোনও উপাদান (বা তদ্বিপরীত) না করা উচিত তখনই এটি চালিয়ে যেতে পারেন
ক্রিস পিফোহল

122

আপনি jQuery রঙ প্লাগইন ব্যবহার করতে পারেন ।

উদাহরণস্বরূপ, আপনার পৃষ্ঠায় সমস্ত ডিভগুলিতে দৃষ্টি আকর্ষণ করার জন্য, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

সম্পাদনা করুন - নতুন এবং উন্নত

নিম্নলিখিতটি উপরের মতো একই কৌশল ব্যবহার করে তবে এর অতিরিক্ত সুবিধা রয়েছে:

  • পরামিতি হাইলাইট রঙ এবং সময়কাল
  • এটি সাদা বলে ধরে নেওয়ার পরিবর্তে আসল পটভূমির রঙ ধরে রাখা
  • jQuery এর এক্সটেনশন হওয়া, যাতে আপনি এটি যেকোন বস্তুতে ব্যবহার করতে পারেন

JQuery অবজেক্টটি প্রসারিত করুন:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

ব্যবহারের উদাহরণ:

$("div").animateHighlight("#dd0000", 1000);

4
আমার জন্যও কাজ করে না - আপনি কি নিশ্চিত যে এটি রঙ অ্যানিমেশন প্লাগইনে নির্ভর করে না? plugins.jquery.com/project/color
UpTheCreek

18
.Animate () এ jquery ডক্স থেকে: সমস্ত অ্যানিমেটেড বৈশিষ্ট্য একক সংখ্যাসূচক মান হওয়া উচিত (নীচে উল্লিখিত হিসাবে বাদে); মৌলিক jQuery কার্যকারিতা ব্যবহার করে অ-সংখ্যাযুক্ত বৈশিষ্ট্যগুলি অ্যানিমেটেড করা যায় না। (উদাহরণস্বরূপ, প্রস্থ, উচ্চতা বা বাম দিকটি অ্যানিমেটেড করা যেতে পারে তবে পটভূমির রঙ হতে পারে না)) সুতরাং আমি অনুমান করি আপনি কোনও প্লাগইন এটি উপলব্ধি না করেই ব্যবহার করছেন।
আপক্রিক

4
আমি লক্ষ্য করেছি এটি কোনও বস্তু ফিরিয়ে দেয়নি। আমি এই সামান্য প্রভাবটি স্ট্যাক করার চেষ্টা করেছি (EG: $ ("# কিটিওহানড") an আমার "এটি ফিরিয়ে দিন" যোগ করার দরকার ছিল পদ্ধতির শেষে।
সেজে

2
অফিসিয়াল jQuery ডক্স বলছে আপনাকে এই কাজ করার জন্য jQuery.Coror () প্লাগইন অবশ্যই ব্যবহার করতে হবে: github.com/jquery/jquery-color
jchook

3
Jquery। অ্যানিম্যাট ডক্স থেকে: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- আপনি রঙ অ্যানিমেট করতে চান, আপনি jQuery UI বা অন্য কোনও প্লাগইন প্রয়োজন।
আদম তোমাট

101

আপনি একটি উপাদান ফ্ল্যাশ করতে css3 অ্যানিমেশন ব্যবহার করতে পারেন

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

এবং আপনি ক্লাস যুক্ত jQuery

jQuery(selector).addClass("flash");

চমৎকার সমাধান, যদি এটি একবারে কাজ করার প্রয়োজন হয়। ক্লাস যুক্ত হওয়ার পরে, ক্লাস যুক্ত করার পরে উপাদানটি যুক্তিযুক্তভাবে যুক্ত হয় না (যুক্তিযুক্তভাবে) উপাদানটি ঝলকানো হয় না।
সাইমন

7
সর্বকালের সেরা ধারণা। আমি প্রভাব 2 সেকেন্ডের পরে বর্গ সরানোর জন্য একটি settimeout ব্যবহৃত
insign

6
অ্যানিমেশনটি সম্পন্ন হওয়ার পরে ক্লাসটি সরিয়ে দেওয়ার উদাহরণ এখানে দেওয়া হয়েছে যাতে আপনি এটি ঝলকানো চালিয়ে যেতে পারেন। jsfiddle.net/daCrosby/eTcXX/1
ড্যাক্রসবি

দুর্দান্ত, এটি কার্যকর, তবে নোট করুন যে ব্যাকগ্রাউন্ড-রঙের জন্য সঠিক সম্পত্তিটি যদি আপনি কোনও স্টাইল শীট যাচাইকারক পাস করতে চান তবে 'কিছুই নয়' এর পরিবর্তে 'স্বচ্ছ' is
জানুয়ারী এম

1
নোট করুন যে সমস্ত আধুনিক ব্রাউজার এখন নিয়মিত @keyframesএবং animationনিয়মকে সমর্থন করে , তাই সম্ভবত -webkit- (ব্ল্যাকবেরি ব্রাউজারের জন্য) ছাড়া আর কোনও উপসর্গীকৃত সংস্করণ ব্যবহার করার দরকার নেই ।
coredumperror

74

5 বছর পরে ... (এবং কোনও অতিরিক্ত প্লাগইনের প্রয়োজন নেই)

এটির পিছনে একটি ডিভ ব্যাকগ্রাউন্ড রঙ রেখে তার পছন্দসই রঙের (যেমন সাদা) রঙের সাথে এটি একটি "ডাল" , এবং তারপরে বস্তুটি বিবর্ণ করা হবে বের করে ফেলা এবং আবার।

এইচটিএমএল অবজেক্ট (যেমন বোতাম):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (ভ্যানিলা, অন্য কোনও প্লাগইন নেই):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

উপাদান - শ্রেণীর নাম

প্রথম সংখ্যা মধ্যেfadeTo() - রূপান্তরটি জন্য মিলিসেকেন্ড

দ্বিতীয় সংখ্যা মধ্যেfadeTo() ফেইড / unfade পর বস্তুর অস্বচ্ছতা -

আপনি এই ওয়েবপৃষ্ঠার নীচের ডানদিকে দেখতে পারেন: https://single.majlovesreg.one/v1/

সম্পাদনা (উইলস্টিল) কোনও ডুপ্লিকেট নির্বাচককে $ (এটি) ব্যবহার করে এবং তাত্ক্ষণিকভাবে একটি ফ্ল্যাশ সম্পাদনের জন্য মানগুলি টুইট করতে হবে (যেমন ওপি অনুরোধ অনুসারে)।


60
fadeTo(0000)-
ধাতবিকা

2
মাখনের মতো মসৃণ! সবার সেরা সমাধান। ধন্যবাদ!
কোল্ড টুনা

1
কিভাবে এই অসীম করতে?
টোমেক্সসানস

1
উদাহরণ লিঙ্ক ভাঙা।
জাল

1
@ টোমেক্সসানস এরপরে $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}আপনি এটিকে এটির মতো কল করতে পারেন $('#mydiv').flashUnlimited();- এটি মজল উপরে বর্ণিত উত্তরটি দেয় এবং চক্রের শেষে নিজেকে আবার কল করে।
জে দাদানিয়া

46

আপনি এটি অর্জন করতে jQuery UI তে হাইলাইট প্রভাবটি ব্যবহার করতে পারেন , আমার ধারণা।


8
এটি jQueryUI এর অংশ, যা বেশ ভারী, মানক jQuery লাইব্রেরির অংশ নয় (যদিও আপনি কেবলমাত্র UI এফেক্টস কোরটি ব্যবহার করতে পারেন, যা এটি নির্ভর করে)।
দ্য ক্রিক

3
আপনি যে প্রভাবগুলি চান সেগুলি কেবলমাত্র ইফেক্টগুলি ডাউনলোড করতে পারেন, "হাইলাইট" এর জন্য + "পালসেট" এর পরিমাণ 12 কেবি। পুরোপুরি হালকা নয়, তবে ভারীও নয়।
রোমান স্টারকভ

45

আপনি যদি jQueryUI ব্যবহার করছেন তবে সেখানে pulsateফাংশন রয়েছেUI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate


1
@ ডেভিডিল, একটি নতুন প্রশ্ন খুলুন এবং কিছু নমুনা কোড পোস্ট করুন। pulsateক্রোমে সূক্ষ্ম কাজ করে।
SooDesuNe

প্রতি 5 সেকেন্ডে ঝলকুন: সেটইন্টারভাল (ফাংশন () {$ ("। লাল-পতাকা")। প্রভাব ("পালসেট", {বার: 3}, 2000);}, 5000);
অ্যাড্রিয়ান পি।

@ সব এখনই যদি এটি CSS3 অ্যানিমেশন এবং / অথবা রূপান্তর ব্যবহার করে? যাই হোক না কেন চমৎকার (তবে তবুও আমি অন্য উত্তরের মতো সিএসএস 3 পছন্দ করি)
মার্টিন মিজার

18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

1
এটি কেবল সহজ এবং মার্জিত।
Gra

অন্যান্য ভাইবোন উপাদানগুলি ব্যবহার fadeInএবং fadeOutপ্রভাবিত করার সময় এটি CSS displayসম্পত্তিকে টগল করে , আমার ক্ষেত্রে অদ্ভুত চেহারা look তবে এটি একটি সমস্যার সমাধান। ধন্যবাদ, এটি মনোহর মত মার্জিতভাবে কাজ করে।
ফিজেনেম

15

আপনি এই প্লাগইনটি ব্যবহার করতে পারেন (এটি একটি জেএস ফাইলে রেখে স্ক্রিপ্ট-ট্যাগের মাধ্যমে ব্যবহার করতে পারেন)

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

এবং তারপরে এই জাতীয় কিছু ব্যবহার করুন:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

এটি সমস্ত jQuery অবজেক্টগুলিতে একটি 'ফ্ল্যাশ' পদ্ধতি যুক্ত করে:

$( '#importantElement' ).flash( '255,0,0', 1000 );

12

পুনরাবৃত্তি গণনাটিকে এভাবে একাধিক ফ্ল্যাশ করার অনুমতি দিয়ে আপনি দেশেন লির পদ্ধতিটি আরও বাড়িয়ে দিতে পারেন:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

তারপরে আপনি সময় এবং ফ্ল্যাশের সংখ্যার সাথে পদ্ধতিটি কল করতে পারেন:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

পরিবর্তিত হয়েছে var iterationDuration = Math.floor(duration / iterations);যাতে আপনি বিজোড় সংখ্যা দ্বারা ভাগ করতে পারেন এবং এটিকে তৈরি করেছেন return this;যাতে আপনি এর পরে অন্যান্য পদ্ধতিগুলি শৃঙ্খলাবদ্ধ করতে পারেন।
ব্যবহারকারী 1477388

এটি সত্যিই যদিও কিছু রঙ পরিবর্তন করে না?
রাত

12

খাঁটি jQuery সমাধান।

(কোনও জেকোরি-ইউআই / অ্যানিমেট / রঙের প্রয়োজন নেই))

আপনি যদি যা চান তেমনই হলুদ "ফ্ল্যাশ" প্রভাবটি jquery রঙ লোড না করে:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

উপরের স্ক্রিপ্টটি কেবল 1s হলুদ বিবর্ণ কাজ করে যা ব্যবহারকারীকে উপাদানটি আপডেট করা হয়েছিল বা এর অনুরূপ কিছু জানাতে উপযুক্ত perfect

ব্যবহার:

flash($('#your-element'))

এই সমাধানটিকে ভালোবাসুন, ব্যাকগ্রাউন্ড বাদে এটি যা যা আগে ফিরে যাবেন না
MrPHP

7

এটি আরও আপ-টু-ডেট উত্তর হতে পারে এবং সংক্ষিপ্ত, কারণ এই পোস্টটি থেকে কিছুটা বিষয় সংহত হয়েছে। প্রয়োজন jQuery-ui এ-প্রভাব-হাইলাইট

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

http://docs.jquery.com/UI/Effects/Highlight


7

আসলেই কী সহজ উত্তর?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

দু'বার জ্বলজ্বলে ... এটাই সব লোকেরা!


এটি অন্য কোনও রঙে জ্বলজ্বল করে না (যা অনুরোধ করা হয়েছিল) এটি কেবল অস্বচ্ছলতাটি বাইরে এবং বাইরে।
টিম ইকেল

6

আমি বিশ্বাস করতে পারি না এটি এখনও এই প্রশ্নে নেই। আপনার যা করতে হবে তা:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

এটি আপনি যা করতে চান ঠিক তা করেন, অতি সহজ, উভয় show()এবং hide()পদ্ধতির জন্যই কাজ করে।


15
দ্রষ্টব্য: এটি কাজ করার জন্য আপনার jquery ui এর প্রভাব যুক্ত হওয়া দরকার। এটি মূল jQuery এর অংশ নয়
ট্র্যাভিস -146

6

একটি নাড়ি প্রভাব(অফলাইন) JQuery প্লাগইন আপনি যা খুঁজছেন তার জন্য উপযুক্ত?

সময়মতো নাড়ির প্রভাব সীমাবদ্ধ করার জন্য আপনি একটি সময়কাল যুক্ত করতে পারেন।


মন্তব্যগুলিতে জেপি দ্বারা উল্লিখিত হিসাবে , এখন তার আপডেট হওয়া পালস প্লাগইন রয়েছে
তার গিটহাব রেপো দেখুন । এবং এখানে একটি ডেমো আছে


পালস প্লাগইন আপডেট হয়েছে: james.padolsey.com
জেমস

ডেমোটি নষ্ট হয়ে গেছে, কারণ এটি
জেএস

@ পান্ডাউড আমি গিটহাব রেপোতে লিংকটি পুনঃস্থাপন করেছি এবং ডেমোটি আপডেট করেছি
ভনসি ২

6
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

1
যথাযথভাবে। ফিড ইন এবং বিবর্ণ হয়ে যাওয়ার উপর সহজ এবং সম্পূর্ণ নিয়ন্ত্রণ।
পলারিস

5

পরে এই অনেক চাঁদ পাওয়া গেছে তবে কেউ যদি যত্ন করে তবে মনে হয় স্থায়ীভাবে ফ্ল্যাশ করার জন্য এটি বেশ ভাল উপায়:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

4

নিম্নলিখিত কোডগুলি আমার জন্য কাজ করে। দুটি ফেড-ইন এবং ফেড-আউট ফাংশনগুলি সংজ্ঞায়িত করুন এবং একে অপরের কলব্যাকে রাখুন।

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

নিম্নলিখিত ফ্ল্যাশগুলির সময়গুলি নিয়ন্ত্রণ করে:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

4

আমি jQuery UI এর উপর নির্ভর না করেই এই সমস্যার সমাধান খুঁজছিলাম।

এটিই আমি নিয়ে এসেছি এবং এটি আমার জন্য কাজ করে (কোনও প্লাগইন নেই, কেবল জাভাস্ক্রিপ্ট এবং jQuery নয়); - হেরেস ওয়ার্কিং ফিডল - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

আপনার সিএসএস ফাইলে বর্তমান সিএসএস প্যারামিটারটিকে সাধারণ সিএসএস হিসাবে সেট করুন এবং একটি নতুন ক্লাস তৈরি করুন যা প্যারামিটারটি অর্থাৎ পটভূমির রঙ পরিবর্তনের জন্য পরিচালনা করে এবং ডিফল্ট আচরণকে ওভাররাইড করার জন্য এটি '! গুরুত্বপূর্ণ' এ সেট করে। এটার মত...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

তারপরে কেবল নীচের ফাংশনটি ব্যবহার করুন এবং ডোম উপাদানটিতে স্ট্রিং হিসাবে পাস করুন, আপনি বারবার যতবার ফ্ল্যাশ করতে চান, যে ক্লাসে আপনি পরিবর্তন করতে চান এবং একটি বিলম্বের জন্য একটি পূর্ণসংখ্যার জন্য পূর্ণসংখ্যার পদক্ষেপ দিন।

দ্রষ্টব্য: আপনি যদি 'টাইম' ভেরিয়েবলের জন্য এমনকি একটি সংখ্যায় পাস করেন তবে আপনি যে ক্লাসটি শুরু করেছেন তা শেষ হবে এবং আপনি যদি কোন বিজোড় সংখ্যাটি পাস করেন তবে আপনি টগলড ক্লাসটি শেষ করবেন। উভয়ই বিভিন্ন জিনিসের জন্য কার্যকর। আমি বিলম্বের সময় পরিবর্তন করতে 'আমি' ব্যবহার করি বা তারা একই সাথে সমস্ত গুলি চালায় এবং প্রভাবটি নষ্ট হয়ে যায়।

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.  

3

ফেডেইন / ফেডআউটের মতো আপনি অ্যানিমেট সিএসএস / বিলম্ব ব্যবহার করতে পারেন

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

সহজ এবং নমনীয়


3
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 হয় 3 সেকেন্ড

অস্বচ্ছতা 1 থেকে এটি 0.3 এ ফিকে হয়ে যায়, তারপরে 1 এবং আরও কিছু হয়।

আপনি এগুলি আরও স্ট্যাক করতে পারেন।

শুধুমাত্র jQuery প্রয়োজন। :)


2

অ্যানিমেট ব্যাকগ্রাউন্ড বাগের জন্য একটি পরিকল্পনা রয়েছে। এই টুকরোটিতে একটি সরল হাইলাইট পদ্ধতি এবং এর ব্যবহারের উদাহরণ অন্তর্ভুক্ত রয়েছে।

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.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]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;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]),parseInt(result[2]),parseInt(result[3])];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];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)];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)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={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);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231


2

লাইব্রেরি সহ যদি ওভারকিল হয় তবে একটি সমাধান যা কাজের গ্যারান্টিযুক্ত।

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});
  1. ইভেন্ট ট্রিগার সেটআপ করুন

  2. ব্লক উপাদানটির পটভূমি রঙ সেট করুন

  3. সেটটাইমআউটের অভ্যন্তরে অল্প অ্যানিমেশন প্রভাব তৈরি করতে ফেইডআউট এবং ফেডইন ব্যবহার করুন।

  4. দ্বিতীয় সেটটাইমআউটের অভ্যন্তরে পুনরায় ডিফল্ট পটভূমি রঙ

    কয়েকটি ব্রাউজারে পরীক্ষিত এবং এটি দুর্দান্তভাবে কাজ করে।


2

দুর্ভাগ্যক্রমে শীর্ষ উত্তরটির জন্য JQuery UI প্রয়োজন। http://api.jquery.com/animate/

এখানে একটি ভ্যানিলা JQuery সমাধান রয়েছে

http://jsfiddle.net/EfKBg/

জাতীয়

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

সিএসএস

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

এইচটিএমএল

<div class="hello">Hello World!</div>

যদি আপনি কেবল flashএকটি jQuery অবজেক্ট করেন তবে এটি দুর্দান্ত কাজ করে। var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
মাইকেল ব্ল্যাকবার্ন

1

এখানে কোলবেরির সমাধানের কিছুটা উন্নত সংস্করণ। আমি একটি রিটার্ন স্টেটমেন্ট যুক্ত করেছি যাতে, সত্যিকারের jQuery আকারে, অ্যানিমেশনটি কল করার পরে আমরা ইভেন্টগুলি চেইন করি। আমি সারিটি সাফ করতে এবং একটি অ্যানিমেশনের শেষে ঝাঁপিয়ে পড়ার জন্য যুক্তিগুলিও যুক্ত করেছি।

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

দ্রষ্টব্য: পটভূমির রঙগুলি অ্যানিমেট করার জন্য রঙের ইউআই প্লাগইন ব্যবহার প্রয়োজন। দেখুন: api.jquery.com/animate
মার্টারাল্ক

1

মাউসওভার ইভেন্টটি ট্রিগার না করা অবধি এই কোনও উপাদানটির পটভূমির রঙটি স্পন্দিত করবে

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}

1

উপরের সমস্তটি থেকে এটি একসাথে রাখুন - কোনও উপাদানকে ঝলকানোর জন্য সহজ সমাধান এবং আসল বিগক্লোরটিতে ফিরে আসুন ...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

এটি ব্যবহার করুন:

$('<some element>').flash('#ffffc0', 1000, 3);

আশাকরি এটা সাহায্য করবে!


মন্দ থেকে সাবধান eval!
বিড়লা

আমি জানি, আমার কেবল একটি দ্রুত এবং নোংরা সমাধানের দরকার ছিল। ইভাল কখনও কখনও এটি ব্যবহার করে!
ডানকান

1

এখানে এমন একটি সমাধান রয়েছে যা jQuery এবং CSS3 অ্যানিমেশনগুলির মিশ্রণ ব্যবহার করে।

http://jsfiddle.net/padfv0u9/2/

মূলত আপনি রঙটি আপনার "ফ্ল্যাশ" রঙে পরিবর্তন করে শুরু করুন এবং তারপরে রঙটি বিবর্ণ হওয়ার জন্য একটি CSS3 অ্যানিমেশন ব্যবহার করুন। প্রাথমিক "ফ্ল্যাশ" বিবর্ণের চেয়ে দ্রুততর হওয়ার জন্য আপনাকে রূপান্তরকাল পরিবর্তন করতে হবে change

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

যেখানে সিএসএসের ক্লাসগুলি নীচে রয়েছে।

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

1

কেবল এলেম.ফ্যাডআউট (10) দিন .ফ্যাডইন (10);


1

এটি যথেষ্ট জেনেরিক যে আপনি যে কোনও কোডটি প্রাণবন্ত করতে চান তা লিখতে পারেন। এমনকি আপনি বিলম্বকে 300ms থেকে 33ms এবং বিবর্ণ রঙ ইত্যাদি কমাতে পারেন etc.

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}

1

গতি এবং পুনরাবৃত্তি এবং রঙের নিয়ন্ত্রণের সাথে আপনি যে কোনও এইচটিএমএল উপাদানের দিকে মনোযোগ কেন্দ্রীভূত করতে jquery পালসেট প্লাগইন ব্যবহার করতে পারেন।

ডেমোসের সাথে জিকুয়েরি.পলসেট () *

নমুনা সূচনা:

  • $ ( "। Pulse4") স্পন্দিত ({গতি: 2500})।
  • $ ("। কমান্ডবক্স বোতাম: দৃশ্যমান")। পালসেট ({রঙ: "# f00", গতি: 200, পৌঁছনো: 85, পুনরাবৃত্তি: 15})
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.