JQuery এ টেক্সট জ্বলজ্বল করার একটি সহজ উপায় এবং এটি বন্ধ করার উপায় কী? আইই, এফএফ এবং ক্রোমের জন্য অবশ্যই কাজ করা উচিত। ধন্যবাদ
উত্তর:
এই পলক প্লাগইন ব্যবহার করার চেষ্টা করুন
উদাহরণ স্বরূপ
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.এটি একটি খুব সাধারণ প্লাগইনও এবং অ্যানিমেশনটি বন্ধ করতে এবং এটির চাহিদা অনুসারে আপনি এটি শুরু করতে পারেন।
কিছু পাঠ্য জ্বলতে একটি প্লাগইন আমার কাছে ওভারকিলের মতো কিছু মনে হচ্ছে ...
এটা চেষ্টা কর...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});blinkএটি প্রয়োগ করতে পারে। সুতরাং আপনার মতো কিছু থাকবে <span class="blink">Blinky Bill</span>এবং তারপরে ডোম প্রস্তুত বা অনুরূপ হওয়ার পরে এই কোডটি চালাবেন।
এখানে অ্যানিমেশনের সাথে জ্বলজ্বল করছে:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});আপনি যা পলক করতে চান তা কেবল একটি ঝলক ক্লাস দিন:
<div class="someclass blink">some text</div>#jquery তে ড্যানিজেডবি-র সকলকে শ্রদ্ধা
বৈশিষ্ট্যগুলি:
আপনি যদি jQuery ব্যবহার না করেন তবে CSS3 দিয়ে এটি অর্জন করা যেতে পারে
@-webkit-keyframes blink {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}Chrome এ কাজ করার জন্য মনে হচ্ছে, যদিও আমি ভেবেছিলাম যে আমি কিছুটা কাঁদছি শুনেছি heard
উপরের কোডগুলি একত্রিত করুন, আমি মনে করি এটি একটি ভাল সমাধান।
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}কমপক্ষে এটি আমার ওয়েবে কাজ করে। http://140.138.168.123/2y78%202782
fadeIn()এবং fadeOut()এটা আপনার জন্য না?
এই আমার; এটি আপনাকে গুরুত্বপূর্ণ 3 পরামিতিগুলির উপর নিয়ন্ত্রণ দেয়:
।
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);আপনি স্ট্যান্ডার্ড সিএসএস উপায়ও ব্যবহার করতে পারেন (জিকুয়েরি প্লাগইনের প্রয়োজন নেই তবে সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");আপনি এগুলিও দেখতে পারেন:
<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>
<script>
function startBlink(){
window.blinker = setInterval(function(){
if(window.blink){
$('.blink').css('color','blue');
window.blink=false;
}
else{
$('.blink').css('color','white');
window.blink = true;
}
},500);
}
function stopBlink(){
if(window.blinker) clearInterval(window.blinker);
}
</script>এটি হ'ল সহজ উপায় (এবং কমপক্ষে কোডিং সহ):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);এখন, আপনি যদি আরও পরিশীলিত কিছু খুঁজছেন ...
//Blink settings
var blink = {
obj: $(".blink"),
timeout: 15000,
speed: 1000
};
//Start function
blink.fn = setInterval(function () {
blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);
//Ends blinking, after 'blink.timeout' millisecons
setTimeout(function () {
clearInterval(blink.fn);
//Ensure that the element is always visible
blink.obj.fadeIn(blink.speed);
blink = null;
}, blink.timeout);$.fn.blink = function(times, duration) {
times = times || 2;
while (times--) {
this.fadeTo(duration, 0).fadeTo(duration, 1);
}
return this;
};setInterval(function ())কয়েকটি সমস্যা বয়ে আনতে পারে (বুদবুদ, থামানো, "চালু", ইত্যাদি) অনেক অনেক ধন্যবাদ!
এখানে আপনি তার তাত্ক্ষণিক ডেমো সহ একটি jQuery ব্লিঙ্ক প্লাগইন খুঁজে পেতে পারেন ।
বেসিক ঝলকানি ( সীমাহীন ঝলকানি, পলক সময়কাল ~ 1 সেকেন্ড ):
$('selector').blink();আরও উন্নত ব্যবহারে আপনি যে কোনও সেটিংস ওভাররাইড করতে পারেন:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});সেখানে আপনি বেশ কয়েকটি ব্লিঙ্কগুলি নির্দিষ্ট করতে পারবেন পাশাপাশি কয়েকটি কলব্যাক অ্যাক্সেস করতে পারবেন: onBlinkএবংonMaxBlinks বেশ সেগুলি বেশ স্ব-বর্ণনামূলক।
আইই 7 এবং 8, ক্রোম, ফায়ারফক্স, সাফারি এবং সম্ভবত আই 6 এবং অপেরাতে (যদিও তাদের উপর পরীক্ষা করা হয়নি) কাজ করে।
(সম্পূর্ণ প্রকাশে: আমি এই পূর্বেরটির স্রষ্টা a আমাদের সিস্টেমে একটি অ্যালার্মের জন্য এটি কাজের ক্ষেত্রে ব্যবহার করার বৈধ প্রয়োজন ছিল [ আমি জানি আমরা সবাই এটি বলতে চাই :-) ] এবং আমি ভাগ করে নেওয়ার চিন্তাভাবনা করি শুধুমাত্র বৈধ প্রয়োজনে ব্যবহারের জন্য ;-))।
এখানে jQuery ঝলকানো প্লাগইনগুলির আরেকটি তালিকা ।
আপনি jQuery UI পালসেট প্রভাব চেষ্টা করতে পারেন:
এই একা একা সমাধানটি নির্দিষ্ট সময়টিকে পাঠ্যটি ঝাপটায় এবং তারপরে থামবে।
ঝলকানি দেখান / আড়াল করা, বিবর্ণ হওয়া বা টগল করার পরিবর্তে অস্বচ্ছতা ব্যবহার করে যাতে ডিআইভি ক্লিকযোগ্য থাকে, যদি কোনও সমস্যা হয় (আপনি জ্বলজ্বলে পাঠ্যের সাহায্যে বোতাম তৈরি করতে পারবেন)।
জেএসফিডেল এখানে (অতিরিক্ত মন্তব্য রয়েছে)
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var init = 0;
$('#clignotant').click(function() {
if (init==0) {
init++;
blink(this, 800, 4);
}else{
alert('Not document.load, so process the click event');
}
});
function blink(selector, blink_speed, iterations, counter){
counter = counter | 0;
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(blink_speed);
$(this).animate({opacity:1}, 50, function(){
counter++;
if (iterations == -1) {
blink(this, blink_speed, iterations, counter);
}else if (counter >= iterations) {
return false;
}else{
blink(this, blink_speed, iterations, counter);
}
});
$(this).delay(blink_speed);
});
}
//This line must come *AFTER* the $('#clignotant').click() function !!
window.load($('#clignotant').trigger('click'));
}); //END $(document).ready()
</script>
</head>
<body>
<div id="clignotant" style="background-color:#FF6666;width:500px;
height:100px;text-align:center;">
<br>
Usage: blink(selector, blink_speed, iterations) <br />
<span style="font-weight:bold;color:blue;">if iterations == -1 blink forever</span><br />
Note: fn call intentionally missing 4th param
</div>
</body>
</html>সূত্র:
ড্যানি গিমেনেজ
মূসা খ্রিস্টান
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<div id="msg"> <strong><font color="red">Awesome Gallery By Anil Labs</font></strong></p> </div>
<script type="text/javascript" >
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('#msg');
</script>আমি stepsথিমযুক্ত পলিফিল পোস্ট করতে যাচ্ছিলাম, কিন্তু তার পরে আমি মনে রেখেছিলাম যে আমি সত্যিই কখনও এই প্রভাবটি দেখতে চাই না, তাই…
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}আমি মনে করি নীচের অন্যান্য উত্তরগুলির তুলনায় বৃহত্তর স্পষ্টতা এবং কাস্টমাইজেশন হয়।
var element_to_blink=$('#id_of_element_to_blink');
var min_opacity=0.2;
var max_opacity=1.0;
var blink_duration=2000;
var blink_quantity=10;
var current_blink_number=0;
while(current_blink_number<blink_quantity){
element_to_blink.animate({opacity:min_opacity},(blink_duration/2),"linear");
element_to_blink.animate({opacity:max_opacity},(blink_duration/2),"linear");
current_blink_number+=1;
}element_idএকটি নির্বাচক 3. নির্দেশিত আপনি একই উপাদান নির্বাচন করুন ও ধরে
এই কোড কার্যকরভাবে উপাদান (গুলি) করতে হবে চোখ পিট পিট লেআউট (মত স্পর্শ ছাড়া fadeIn().fadeOut()কি করতে হবে) শুধু অস্বচ্ছতা অভিনয়; আপনি সেখানে যান, জ্বলজ্বল পাঠ্য; ভাল এবং মন্দ উভয়ের জন্য ব্যবহারযোগ্য :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);এই কোডটি এই বিষয়ে সহায়তা করতে পারে। সহজ, তবু দরকারী।
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("$('#myID/.myClass').toggle();",500);
});
</script>আমি অ্যালেক্সের উত্তরটি পছন্দ করি, সুতরাং এটি একটি বিরতি ছাড়াই এর প্রসারিতের সামান্য অংশ (যেহেতু আপনাকে শেষ অবধি পরিষ্কার করতে হবে এবং যখন ঝলকানো বন্ধ করার জন্য আপনি একটি বোতাম চান তখন এটি জানতে হবে This , জ্বলজ্বলে অফসেটের জন্য আপনি যে এমএসটি চান এবং যে পরিমাণ উপাদানটি আপনি জ্বলতে চান তার সংখ্যা:
function blink ($element, ms, times) {
for (var i = 0; i < times; i++) {
window.setTimeout(function () {
if ($element.is(':visible')) {
$element.hide();
} else {
$element.show();
}
}, ms * (times + 1));
}
}এর মধ্যে কয়েকটি উত্তর বেশ জটিল, এটি কিছুটা সহজ:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();এই প্রশ্নের মতামতের সংখ্যা, এবং এটির জ্বলজ্বলে এবং এটি বন্ধ করা উভয়ই জবাবের অভাব দেখে এখানে যায়: jQuery.blinker আউট চেষ্টা করুন ( ডেমো )।
এইচটিএমএল:
<p>Hello there!</p>javascript:
var p = $("p");
p.blinker();
p.bind({
// pause blinking on mouseenter
mouseenter: function(){
$(this).data("blinker").pause();
},
// resume blinking on mouseleave
mouseleave: function(){
$(this).data("blinker").blinkagain();
}
});একটি সাধারণ ঝলক প্রভাব জন্য একটি প্লাগইন ওভারকিল হয়। সুতরাং বিভিন্ন সমাধান নিয়ে পরীক্ষা-নিরীক্ষার পরে, আমি জাভাস্ক্রিপ্টের একটি লাইন এবং একটি সিএসএস শ্রেণীর মধ্যে বেছে নিয়েছি যা নিয়ন্ত্রণ করে আমি কীভাবে উপাদানগুলিকে ঝাপটতে চাই (পলক কাজ করার জন্য আমার কেবল পটভূমিটি স্বচ্ছতে পরিবর্তন করতে হবে, যাতে পাঠ্যটি এখনও দৃশ্যমান):
জাতীয়:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});সিএসএস:
span.no-bg {
background-color: transparent;
}এই জেএস ফিডেলে সম্পূর্ণ উদাহরণ ।
পলক কার্যকারিতা সরল জাভাস্ক্রিপ্ট দ্বারা প্রয়োগ করা যেতে পারে, jquery প্লাগইন বা এমনকি jquery জন্য প্রয়োজন নেই।
এটি সমস্ত ব্রাউজারগুলিতে কাজ করবে , কারণ এটি মৌলিক কার্যকারিতা ব্যবহার করে
কোডটি এখানে
এইচটিএমএল:
<p id="blinkThis">This will blink</p>জেএস কোড:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);এবং একটি কার্যকরী মজার
এটিই আমার পক্ষে সবচেয়ে ভাল কাজ করে। আমি jQuery fadeTo ব্যবহার করেছি কারণ এটি ওয়ার্ডপ্রেসে রয়েছে যা ইতিমধ্যে jQuery এর সাথে লিঙ্ক করেছে Otherwise
$(document).ready(function() {
// One "blink" takes 1.5s
setInterval(function(){
// Immediately fade to opacity: 0 in 0ms
$(".cursor").fadeTo( 0, 0);
// Wait .75sec then fade to opacity: 1 in 0ms
setTimeout(function(){
$(".cursor").fadeTo( 0, 1);
}, 750);
}, 1500);
});আমি টেক্সট ব্লিঙ্কের জন্য একটি সহজ জ্যাকুরি এক্সটেনশন লিখেছি যখন পাঠ্যটি জ্বলতে হবে তার উল্লেখ করে, আশা করি এটি অন্যদের সহায়তা করে।
//add Blink function to jquery
jQuery.fn.extend({
Blink: function (i) {
var c = i; if (i===-1 || c-- > 0) $(this).fadeTo("slow", 0.1, function () { $(this).fadeTo("slow", 1, function () { $(this).Blink(c); }); });
}
});
//Use it like this
$(".mytext").Blink(2); //Where 2 denotes number of time it should blink.
//For continuous blink use -1
$(".mytext").Blink(-1);টেক্সট জ্বলজ্বল শুরু এবং বোতাম ক্লিক ক্লিক করুন -
<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>