Szukam sposobu, aby wykonać następujące czynności.
Dodaję <div>
do strony, a wywołanie zwrotne Ajax zwraca pewną wartość. <div>
Jest wypełnione wartościami z AJAX i <div>
jest następnie dołączany do drugiego <div>
, który działa jako kolumna tabeli.
Chciałbym zwrócić uwagę użytkownika, pokazać mu, że na stronie jest coś nowego.
Chcę, <div>
żeby migał, a nie pokazywał / ukrywał, ale podświetlał / nie podświetlał przez jakiś czas, powiedzmy 5 sekund.
Patrzyłem na wtyczkę blink, ale o ile widzę, pokazuje / ukrywa tylko na elemencie.
Przy okazji, rozwiązanie musi być cross-browser, i tak, IE niestety zawiera. Prawdopodobnie będę musiał trochę zhakować, aby działał w IE, ale ogólnie musi działać.
Odpowiedzi:
Efekt wyróżnienia jQuery UI jest tym, czego szukasz.
$("div").click(function () { $(this).effect("highlight", {}, 3000); });
Dokumentację i demo można znaleźć tutaj
Edycja :
Może bardziej odpowiedni jest efekt pulsacji interfejsu użytkownika jQuery , patrz tutaj
Edycja nr 2 :
Aby dostosować krycie, możesz to zrobić:
$("div").click(function() { // do fading 3 times for(i=0;i<3;i++) { $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0); } });
... więc krycie nie spadnie poniżej 50%.
źródło
Spójrz na http://jqueryui.com/demos/effect/ . Ma efekt zwany pulsacją, który zrobi dokładnie to, co chcesz.
$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
źródło
To jest stworzony przeze mnie niestandardowy efekt migania, który wykorzystuje
setInterval
ifadeTo
HTML -
<div id="box">Box</div>
JS -
setInterval(function(){blink()}, 1000); function blink() { $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0); }
Tak proste, jak to tylko możliwe.
http://jsfiddle.net/Ajey/25Wfn/
źródło
Jeśli nie korzystasz jeszcze z biblioteki Jquery UI i chcesz naśladować efekt to co możesz zrobić jest bardzo proste
$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
możesz też bawić się liczbami, aby uzyskać szybszy lub wolniejszy, aby lepiej pasował do Twojego projektu.
Może to być również globalna funkcja jquery, więc możesz użyć tego samego efektu w całej witrynie. Zauważ również, że jeśli umieścisz ten kod w pętli for, możesz mieć 1 milion impulsów, więc nie jesteś ograniczony do domyślnych 6 ani do ich wartości domyślnej.
EDYCJA: Dodanie tego jako globalnej funkcji jQuery
$.fn.Blink = function (interval = 100, iterate = 1) { for (i = 1; i <= iterate; i++) $(this).fadeOut(interval).fadeIn(interval); }
Łatwo zamknij dowolny element ze swojej witryny, korzystając z następującego polecenia
$('#myElement').Blink(); // Will Blink once $('#myElement').Blink(500); // Will Blink once, but slowly $('#myElement').Blink(100, 50); // Will Blink 50 times once
źródło
Ci, którzy nie chcą uwzględniać całego interfejsu użytkownika jQuery, mogą zamiast tego użyć jQuery.pulse.js .
Aby uzyskać zapętloną animację zmiany krycia, wykonaj następujące czynności:
$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});
Jest lekki (mniej niż 1kb) i umożliwia zapętlenie dowolnego rodzaju animacji.
źródło
jquery.color.js
kolor.Możesz zajrzeć do interfejsu użytkownika jQuery. W szczególności efekt podświetlenia:
http://jqueryui.com/demos/effect/
źródło
Ponieważ nie widzę żadnych rozwiązań opartych na jQuery, które nie wymagają dodatkowych bibliotek, tutaj jest proste, które jest nieco bardziej elastyczne niż te używające fadeIn / fadeOut.
$.fn.blink = function (count) { var $this = $(this); count = count - 1 || 0; $this.animate({opacity: .25}, 100, function () { $this.animate({opacity: 1}, 100, function () { if (count > 0) { $this.blink(count); } }); }); };
Użyj tego w ten sposób
$('#element').blink(3); // 3 Times.
źródło
Używam różnych predefiniowanych kolorów, jak na przykład:
theme = { whateverFlashColor: '#ffffaa', whateverElseFlashColor: '#bbffaa', whateverElseThenFlashColor: '#ffffff', };
i używaj ich w ten sposób
$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);
łatwy :)
źródło
Jeśli nie chcesz narzutów związanych z interfejsem użytkownika jQuery, niedawno napisałem rozwiązanie rekurencyjne wykorzystujące
.animate()
. Możesz dostosować opóźnienia i kolory według potrzeb.function doBlink(id, count) { $(id).animate({ backgroundColor: "#fee3ea" }, { duration: 100, complete: function() { // reset $(id).delay(100).animate({ backgroundColor: "#ffffff" }, { duration: 100, complete: function() { // maybe call next round if(count > 1) { doBlink(id, --count); } } }); } }); }
Oczywiście będziesz potrzebować wtyczki kolorów, aby rozpocząć
backgroundColor
pracę.animate()
. https://github.com/jquery/jquery-colorAby zapewnić trochę kontekstu, tak to nazwałem. Musiałem przewinąć stronę do mojego docelowego div, a następnie go zamrugać.
$(window).load(function(){ $('html,body').animate({ scrollTop: $(scrollToId).offset().top - 50 }, { duration: 400, complete: function() { doBlink(scrollToId, 5); } }); });
źródło
Myślę, że możesz użyć podobnej odpowiedzi, której udzieliłem. Możesz go znaleźć tutaj ... https://stackoverflow.com/a/19083993/2063096
Uwaga: to rozwiązanie NIE korzysta z interfejsu użytkownika jQuery, jest też skrzypce, dzięki czemu można bawić się według własnych upodobań przed zaimplementowaniem go w kodzie.
źródło
po prostu daj elem.fadeOut (10) .fadeIn (10);
źródło
Spróbuj z wtyczką jquery.blink.js:
https://github.com/webarthur/jquery-blink
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="/path/to/jquery.blink.js"></script> <script> jQuery('span').blink({color:'white'}, {color:'black'}, 50); </script>
#cieszyć się!
źródło
<script> $(document).ready(function(){ var count = 0; do { $('#toFlash').fadeOut(500).fadeIn(500); count++; } while(count < 10);/*set how many time you want it to flash*/ }); </script
źródło
Sprawdź to -
<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>
źródło
Nie mogłem znaleźć dokładnie tego, czego szukałem, więc napisałem coś tak podstawowego, jak tylko mogłem. Podświetlona klasa może być po prostu kolorem tła.
var blinking = false; // global scope function start_blinking() { blinking = true; blink(); } function stop_blinking() { blinking = false; } function blink(x=0) { $("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping if (blinking) { if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x setTimeout(function(){blink(++x)},500); // increment x and recurse } }
źródło