Podczas tworzenia nowej wersji portfolio, którą w tej chwili oglądacie, pomyślałem, co by zrobić efekt pulsowania na neonkach, które owijają drzewko w zakładce projekty. Pluginy, które są dostępne w sieci (jQuery Cycle, jQuery UI Effects Pulsate i podobne) wymagają albo dodatkowych bibliotek, albo zawierają niepotrzebne ilości kodu, a jeśli już któreś są w miarę w porządku, to tak czy siak dodatkowo nie wspierają wskazanych obiektów jako pojedynczych elementów, tylko działają np. na całych listach lub kontenerach. To skrobnąłem sobie plugin jQuery o poniższej treści:
(function ($) {
$.fn.pulse = function(o) {
this.each(function() {
var elem = $(this);
pulseTime = o.pulseTime ? o.pulseTime : 2000;
interval = o.interval ? o.interval : 4000;
if(elem!=null) {
setInterval(function() { elem.is(":hidden") ? elem.fadeIn(pulseTime) : elem.fadeOut(pulseTime) },interval);
}
});
};
})(jQuery);
Działanie funkcji opiera się na wywołaniu na wskazanym obiekcie DOM ukrywania oraz ujawniania jego samego z wykorzystaniem interwału i czasu zanikania / pojawiania podanych w parametrach. Jeżeli nie zostaną podane parametry, domyślnymi wartościami dla czasu pulsowania i interwału są odpowiednio 2000 i 4000 ms. Aby wywołać akcję wystarczy klepnąć w kodzie:
$(document).ready(function(){
$("#costam").pulse({pulseTime:2000,interval:5000});
// lub $("#costam").pulse();
// w drugim przypadku, wartości zostaną domyślne (2000 oraz 4000ms)
});
Obiekt będzie zanikał i pojawiał się przez 2 sekundy co 5 sekund :)
Przykład działania można zaobserwować np. w dziale portfolio:)
Miłego pulsowania:P
Komentarze
Ten wpis nie posiada jeszcze komentarzy
Dodaj komentarz