Jaki jest łatwy sposób na miganie tekstu w jQuery i sposób na zatrzymanie tego? Musi działać dla IE, FF i Chrome. Dzięki
Jaki jest łatwy sposób na miganie tekstu w jQuery i sposób na zatrzymanie tego? Musi działać dla IE, FF i Chrome. Dzięki
Odpowiedzi:
Spróbuj użyć tej wtyczki Blink
Na przykład
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
Jest to również bardzo prosta wtyczka i prawdopodobnie możesz ją rozszerzyć, aby zatrzymać animację i uruchomić ją na żądanie.
Wtyczka do migania tekstu brzmi dla mnie trochę jak przesada ...
Spróbuj tego...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});
blink
zostanie zastosowane to. Więc miałbyś coś podobnego, <span class="blink">Blinky Bill</span>
a potem po DOM ready lub podobnym, uruchom ten kod.
tutaj miga z animacją:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});
po prostu daj lekcję mrugnięcia, cokolwiek chcesz mrugnąć:
<div class="someclass blink">some text</div>
wszystkie pozdrowienia dla DannyZB na #jquery
cechy:
Jeśli wolisz nie używać jQuery, możesz to osiągnąć za pomocą 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;
}
Wygląda na to, że działa w Chrome, chociaż wydawało mi się, że usłyszałem delikatny szloch.
Połącz powyższe kody, myślę, że to dobre rozwiązanie.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
Przynajmniej działa w mojej sieci. http://140.138.168.123/2y78%202782
fadeIn()
i fadeOut()
nie zrobiłeś tego za Ciebie?
To moje ; daje Ci kontrolę nad 3 ważnymi parametrami:
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);
Możesz także użyć standardowego sposobu CSS (nie potrzebujesz wtyczki JQuery, ale kompatybilny ze wszystkimi przeglądarkami):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
Możesz też spróbować tych:
<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>
To NAJŁATWIEJSZY sposób (i najmniej kodowania):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);
Teraz, jeśli szukasz czegoś bardziej wyrafinowanego ...
//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 ())
może przynieść kilka problemów (bulgotanie, zatrzymywanie się, pozostawanie „włączone” itp.) Wielkie dzięki!
Tutaj możesz znaleźć wtyczkę jQuery blink z jej szybkim demo .
Podstawowe miganie ( nieograniczone miganie, czas migania ~ 1 sek. ):
$('selector').blink();
W przypadku bardziej zaawansowanych zastosowań możesz zastąpić dowolne ustawienia:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
Tam możesz określić maksymalną liczbę mrugnięć, a także mieć dostęp do kilku wywołań zwrotnych: onBlink
i onMaxBlinks
są one dość oczywiste.
Działa w IE 7 i 8, Chrome, Firefox, Safari i prawdopodobnie w IE 6 i Opera (chociaż nie testowałem na nich).
(Do pełnego ujawnienia: jestem twórcą tego poprzedniego. Mieliśmy uzasadnioną potrzebę użycia go w pracy [ wiem, że wszyscy lubimy to mówić :-) ] do alarmu w systemie i pomyślałem o udostępnieniu tylko do użytku w uzasadnionej potrzebie ;-)).
Oto kolejna lista wtyczek jQuery blink .
Możesz wypróbować efekt pulsacji interfejsu użytkownika jQuery:
To samodzielne rozwiązanie zamiga tekst określoną liczbę razy, a następnie zatrzyma się.
Mruganie wykorzystuje krycie, zamiast pokazywać / ukrywać, zanikać lub przełączać, dzięki czemu DIV pozostaje klikalny, na wypadek, gdyby kiedykolwiek wystąpił problem (umożliwia tworzenie przycisków z migającym tekstem).
jsFiddle tutaj (zawiera dodatkowe komentarze)
<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>
Źródła:
Danny Gimenez
Moses Christian
<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>
Miałem zamieścić steps
zaplanowany polyfill, ale potem przypomniałem sobie, że naprawdę nie chcę widzieć tego efektu, więc…
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}
Uważam, że poniższe odpowiedzi są bardziej przejrzyste i można je dostosować do własnych potrzeb niż inne odpowiedzi.
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
wskazując selektor 3. Wybierasz ten sam element w kółko
Ten kod skutecznie sprawi, że element (y) będą migać bez dotykania układu (tak jak fadeIn().fadeOut()
zrobi), po prostu działając na krycie; Proszę bardzo, migający tekst; użyteczne zarówno dla dobra, jak i zła :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);
Ten kod może pomóc w tym temacie. Proste, ale przydatne.
<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>
Podoba mi się odpowiedź Alexa, więc jest to trochę przedłużenie tego bez interwału (ponieważ musiałbyś w końcu wyczyścić ten interwał i wiedzieć, kiedy chcesz, aby przycisk przestał migać. Jest to rozwiązanie, w którym podajesz element jquery , żądane ms dla migającego przesunięcia i ile razy chcesz, aby element migał:
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));
}
}
Niektóre z tych odpowiedzi są dość skomplikowane, to jest trochę łatwiejsze:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();
Widząc liczbę wyświetleń tego pytania i brak odpowiedzi, które obejmują zarówno mruganie, jak i zatrzymywanie go, oto: wypróbuj jQuery.blinker ( demo ).
HTML:
<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();
}
});
Rzeczywiście wtyczka do prostego efektu mrugnięcia jest przesada. Więc po eksperymentowaniu z różnymi rozwiązaniami wybrałem jedną linię javascript i klasę CSS, która dokładnie kontroluje, w jaki sposób chcę migać elementami (w moim przypadku, aby miganie działało, wystarczy zmienić tło na przezroczyste, więc tekst jest nadal widoczny):
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
Pełny przykład na tym skrzypcach js .
Funkcjonalność Blink można zaimplementować za pomocą zwykłego javascript, bez konieczności używania wtyczki jquery lub nawet jquery.
Będzie to działać we wszystkich przeglądarkach , ponieważ korzysta z podstawowej funkcjonalności
Oto kod
HTML:
<p id="blinkThis">This will blink</p>
Kod JS:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);
To właśnie okazało się dla mnie najlepsze. Użyłem jQuery fadeTo, ponieważ jest to na WordPressie, który już łączy jQuery. W przeciwnym razie prawdopodobnie wybrałbym coś z czystym JavaScriptem przed dodaniem kolejnego żądania http dla wtyczki.
$(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);
});
Napisałem proste rozszerzenie jQuery do mrugania tekstu, określając jednocześnie, ile razy powinien mrugać tekst. Mam nadzieję, że pomoże to innym.
//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);
Tekst Migający początek i koniec po kliknięciu przycisku -
<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>