Cách dễ dàng để làm cho văn bản nhấp nháy trong jQuery và cách để ngăn chặn nó là gì? Phải hoạt động cho IE, FF và Chrome. Cảm ơn
Cách dễ dàng để làm cho văn bản nhấp nháy trong jQuery và cách để ngăn chặn nó là gì? Phải hoạt động cho IE, FF và Chrome. Cảm ơn
Câu trả lời:
Hãy thử sử dụng plugin nhấp nháy này
Ví dụ
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
Nó cũng là một plugin rất đơn giản và bạn có thể mở rộng nó để dừng hoạt ảnh và bắt đầu nó theo yêu cầu.
Một plugin để nhấp nháy một số văn bản nghe có vẻ hơi quá mức cần thiết đối với tôi ...
Thử cái này...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});
blink
sẽ được áp dụng điều này cho nó. Vì vậy, bạn sẽ có một cái gì đó tương tự <span class="blink">Blinky Bill</span>
và sau đó sau khi DOM sẵn sàng hoặc tương tự, hãy chạy mã này.
đây là nhấp nháy với hoạt ảnh:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});
chỉ cần cung cấp cho một lớp nhấp nháy bất cứ điều gì bạn muốn nhấp nháy:
<div class="someclass blink">some text</div>
tất cả liên quan đến DannyZB trên #jquery
đặc trưng:
Nếu bạn không muốn sử dụng jQuery, điều này có thể đạt được với 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;
}
Có vẻ như hoạt động trong Chrome, mặc dù tôi nghĩ rằng tôi nghe thấy một tiếng động nhỏ.
Kết hợp các mã trên, tôi nghĩ rằng đây là một giải pháp tốt.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
Ít nhất nó hoạt động trên web của tôi. http://140.138.168.123/2y78%202782
fadeIn()
và fadeOut()
không làm điều đó cho bạn?
Đây là của tôi ; nó cho phép bạn kiểm soát 3 thông số quan trọng:
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);
Bạn cũng có thể sử dụng cách CSS chuẩn (không cần plugin JQuery, nhưng tương thích với tất cả các trình duyệt):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
Bạn cũng có thể thử những điều này:
<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>
Đây là cách DỄ DÀNG NHẤT (và tốn ít mã nhất):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);
Bây giờ, nếu bạn đang tìm kiếm thứ gì đó phức tạp hơn ...
//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 ())
có thể mang lại một số vấn đề (sủi bọt, dừng lại, ở lại "bật", v.v.) Cảm ơn rất nhiều!
Tại đây bạn có thể tìm thấy một plugin jQuery nháy với bản trình diễn nhanh của nó .
Nhấp nháy cơ bản (nhấp nháy không giới hạn, thời gian nhấp nháy ~ 1 giây ):
$('selector').blink();
Khi sử dụng nâng cao hơn, bạn có thể ghi đè bất kỳ cài đặt nào:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
Ở đó, bạn có thể chỉ định số lần nhấp nháy tối đa cũng như có quyền truy cập vào một số lệnh gọi lại: onBlink
và onMaxBlinks
điều đó khá tự giải thích.
Hoạt động trên IE 7 & 8, Chrome, Firefox, Safari và có thể trong IE 6 và Opera (mặc dù chưa thử nghiệm trên chúng).
(Tiết lộ đầy đủ: Tôi là người tạo ra cái trước này. Chúng tôi có nhu cầu chính đáng để sử dụng nó trong công việc [ Tôi biết tất cả chúng ta đều thích nói điều này :-) ] để báo thức trong một hệ thống và tôi đã nghĩ đến việc chia sẻ chỉ sử dụng cho nhu cầu chính đáng ;-)).
Đây là một danh sách các plugin jQuery nháy mắt khác .
Bạn có thể thử hiệu ứng jQuery UI Pulsate:
Giải pháp độc lập này sẽ nhấp nháy văn bản một số lần xác định và sau đó dừng lại.
Tính năng nhấp nháy sử dụng độ mờ chứ không phải hiển thị / ẩn, mờ dần hoặc chuyển đổi để DIV vẫn có thể nhấp được, trong trường hợp đó là sự cố (cho phép bạn tạo các nút có văn bản nhấp nháy).
jsFiddle tại đây (chứa các nhận xét bổ sung)
<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>
Nguồn:
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>
Tôi đã định đăng steps
polyfill theo chủ đề, nhưng sau đó tôi nhớ rằng tôi thực sự không muốn thấy hiệu ứng này, vì vậy…
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}
Tôi cảm thấy câu trả lời sau đây rõ ràng và tùy biến hơn các câu trả lời khác.
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
trỏ đến một bộ chọn 3. Bạn chọn lặp đi lặp lại cùng một phần tử
Mã này sẽ làm cho (các) phần tử nhấp nháy một cách hiệu quả mà không cần chạm vào bố cục (giống như fadeIn().fadeOut()
sẽ làm) bằng cách chỉ tác động lên độ mờ; Đây rồi, văn bản nhấp nháy; có thể sử dụng cho cả thiện và ác :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);
Mã này có thể giúp ích cho chủ đề này. Đơn giản, nhưng hữu ích.
<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>
Tôi thích câu trả lời của alex, vì vậy đây là một phần mở rộng của điều đó mà không có khoảng ngắt (vì cuối cùng bạn sẽ cần xóa khoảng đó và biết khi nào bạn muốn một nút ngừng nhấp nháy. Đây là một giải pháp khi bạn chuyển vào phần tử jquery , ms bạn muốn cho phần bù nhấp nháy và số lần bạn muốn phần tử nhấp nháy:
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));
}
}
Một số câu trả lời trong số này khá phức tạp, điều này dễ dàng hơn một chút:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();
Xem số lượt xem cho câu hỏi này và thiếu câu trả lời bao gồm cả việc nhấp nháy và dừng nó, hãy tiếp tục: hãy thử jQuery.blinker out ( 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();
}
});
Thật vậy, một plugin cho hiệu ứng nhấp nháy đơn giản là quá mức cần thiết. Vì vậy, sau khi thử nghiệm với nhiều giải pháp khác nhau, tôi đã chọn giữa một dòng javascript và một lớp CSS kiểm soát chính xác cách tôi muốn nhấp nháy các phần tử (trong trường hợp của tôi để nhấp nháy hoạt động, tôi chỉ cần thay đổi nền thành trong suốt, vì vậy văn bản vẫn hiển thị):
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
Ví dụ đầy đủ tại js fiddle này .
Chức năng nhấp nháy có thể được triển khai bằng javascript thuần túy, không yêu cầu đối với plugin jquery hoặc thậm chí là jquery.
Điều này sẽ hoạt động trong tất cả các trình duyệt , vì nó đang sử dụng chức năng cơ bản
Đây là mã
HTML:
<p id="blinkThis">This will blink</p>
Mã JS:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);
và một tay làm việc
Đây là những gì cuối cùng làm việc tốt nhất cho tôi. Tôi đã sử dụng jQuery fadeTo vì đây là trên WordPress, đã liên kết jQuery vào. Nếu không, tôi có thể đã chọn một thứ gì đó có JavaScript thuần túy trước khi thêm một yêu cầu http khác cho một plugin.
$(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);
});
Tôi đã viết một phần mở rộng jquery đơn giản cho nhấp nháy văn bản trong khi chỉ định số lần nó sẽ nhấp nháy văn bản, Hy vọng nó sẽ giúp ích cho những người khác.
//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);
Bắt đầu nhấp nháy văn bản và dừng khi nhấp vào nút -
<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>