JQuery में टेक्स्ट ब्लिंक करने और इसे रोकने का एक आसान तरीका क्या है? IE, FF और Chrome के लिए काम करना चाहिए। धन्यवाद
इसे आज़माइए
—
अहसन
JQuery में टेक्स्ट ब्लिंक करने और इसे रोकने का एक आसान तरीका क्या है? IE, FF और Chrome के लिए काम करना चाहिए। धन्यवाद
जवाबों:
इस ब्लिंक प्लगइन का उपयोग करके देखें
उदाहरण के लिए
$('.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>और फिर DOM तैयार या समान होने के बाद, इस कोड को चलाना होगा।
यहाँ एनीमेशन के साथ निमिष है:
$(".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;
}क्रोम में काम करने लगता है, हालांकि मुझे लगा कि मैंने थोड़ा सा शोर सुना है।
ऊपर दिए गए कोड को मिलाएं, मुझे लगता है कि यह एक अच्छा समाधान है।
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);आप मानक CSS तरीके (JQuery प्लगइन की कोई आवश्यकता नहीं है, लेकिन सभी ब्राउज़रों के साथ संगत) का उपयोग कर सकते हैं:
// 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 यह बहुत ही आत्म व्याख्यात्मक हैं।
IE 7 और 8, क्रोम, फ़ायरफ़ॉक्स, सफारी और शायद IE 6 और ओपेरा (हालांकि उन पर परीक्षण नहीं किया गया है) में काम करता है।
(पूर्ण प्रकटीकरण में: मैं इस पिछले एक का निर्माता हूं। हमें काम पर इसका उपयोग करने की वैध आवश्यकता थी [ मुझे पता है कि हम एक सिस्टम के भीतर अलार्म के लिए यह सब कहना पसंद करते हैं ] और मैंने साझा करने के बारे में सोचा केवल एक वैध आवश्यकता पर उपयोग के लिए ;-))।
यहाँ jQuery पलक प्लगइन्स की एक और सूची है ।
आप jQuery UI पल्सेट प्रभाव को आजमा सकते हैं:
यह स्टैंड-अलोन समाधान पाठ को कई बार निर्दिष्ट करेगा और फिर बंद कर देगा।
पलक दिखाने / छिपाने, फीका करने या टॉगल करने के बजाय अस्पष्टता का उपयोग करता है ताकि DIV क्लिक करने योग्य बना रहे, यदि कभी कोई समस्या हो (आपको ब्लिंकिंग टेक्स्ट के साथ बटन बनाने की अनुमति मिलती है)।
jsFiddle यहां (अतिरिक्त टिप्पणियां शामिल हैं)
<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-timed polyfill पोस्ट करने जा रहा था , लेकिन फिर मुझे याद आया कि मैं वास्तव में कभी भी इस प्रभाव को नहीं देखना चाहता, इसलिए…
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>मुझे एलेक्स का जवाब पसंद है, इसलिए यह बिना किसी अंतराल के थोड़ा विस्तार है (क्योंकि आपको अंततः उस अंतराल को साफ करना होगा और जानना होगा कि आप बटन को पलक झपकते ही चाहते हैं। यह एक समाधान है जहां आप jquery तत्व में पास होते हैं। , एमएस आप पलक झपकने के लिए चाहते हैं और पलक झपकने के लिए जितनी बार आप तत्व चाहते हैं, उतनी बार:
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 को आज़माएं ( डेमो )।
HTML:
<p>Hello there!</p>जावास्क्रिप्ट:
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();
}
});वास्तव में एक साधारण पलक प्रभाव के लिए एक प्लगइन ओवरकिल है। इसलिए विभिन्न समाधानों के साथ प्रयोग करने के बाद, मैंने जावास्क्रिप्ट की एक पंक्ति और एक CSS वर्ग के बीच चयन किया है, जो वास्तव में नियंत्रित करता है कि मैं तत्वों को कैसे ब्लिंक करना चाहता हूं (पलक झपकने के लिए काम करने के लिए मुझे केवल पृष्ठभूमि को पारदर्शी में बदलने की आवश्यकता है, ताकि पाठ अभी भी दिखाई दे रहा है):
जे एस:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});सीएसएस:
span.no-bg {
background-color: transparent;
}इस जेएस फिडेल पर पूर्ण उदाहरण ।
पलक कार्यक्षमता को सादे जावास्क्रिप्ट द्वारा कार्यान्वित किया जा सकता है, jquery प्लगइन या यहां तक कि jquery के लिए कोई आवश्यकता नहीं है।
यह सभी ब्राउज़रों में काम करेगा , क्योंकि यह बुनियादी कार्यक्षमता का उपयोग कर रहा है
यहाँ कोड है
HTML:
<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 को लिंक करता है। अन्यथा, मैं शायद प्लगइन के लिए एक और http अनुरोध जोड़ने से पहले शुद्ध जावास्क्रिप्ट के साथ कुछ चुन सकता था।
$(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);
});मैंने टेक्स्ट ब्लिंक के लिए एक सरल jquery एक्सटेंशन लिखा है, जबकि यह टेक्स्ट को ब्लिंक करने की संख्या को निर्दिष्ट करते हुए, आशा है कि यह दूसरों की मदद करता है।
//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>