Krycie Jadeitowe Zanikanie w pętli

Question

Jeden z moich klientów poprosił mnie o zrobienie mrugającego efektu na div. Myślę, że to może nie być najlepsze dla niego, może światło blednące i opadające z nieprzezroczystości zwróci uwagę jego klientów, bez irytowania ich.

Obecnie mam

<a class="special_button" href="#">Special Offers &rsaquo;</a> 

Mam następujący kod dla innego div, co powoduje pojawiania się na obciążenie przeglądarki:

$('.logo-top').delay(700).animate({ 
    'opacity' : '1',   
    'top' : '+=40px' 
}, { duration: 700, easing: 'swing' }); 

jak mogłoby zrobić coś podobnego do special_button, ale zamiast tego zapętlanie krycia? Od powiedzmy 80 do 100?

Byłoby jeszcze lepiej, gdyby to zapętlony pewną ilość razy, może jak 5.

Best, Stepan

Answer 1

Prawdopodobnie chcesz mieć coś takiego jsFiddle.

Możesz także wskazać, ile razy ma to mrugać, po prostu zachowując licznik.

Kod z jsFiddle:

$(document).ready(function() { 
    function runIt() {   
     var baloon = $('#baloon'); 
     baloon.animate({opacity:'1'}, 1000); 
     baloon.animate({opacity:'0.5'}, 1000, runIt); 
    } 
    runIt(); 
}); 

Answer 2

Można zrobić to w ten sposób;

(function() { 
    var cnt = 0; 
    var specials = $(".special_button"); 

    function next() { 
     if (cnt < 5) { 
      specials.fadeTo(2000, .1).fadeTo(2000, 1, next); 
      ++cnt; 
     }      
    } 

    next(); 
})(); 
​ 

demo pracy: http://jsfiddle.net/jfriend00/558GY/

FYI, różnica pomiędzy 80% a 100% nieprzezroczystości bardzo subtelne. W demie znacznie zwiększyłem różnicę. Możesz oczywiście dostroić się do dowolnego efektu.

Answer 3

O ile rozumiem, chcesz coś miga tutaj swoje:

$("document").ready(function() { 
    anm(".special_button"); 
}); 
function anm(element) { 
    $(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); }); 
} 

Demo: http://jsfiddle.net/BerkerYuceer/GdcRs/

Answer 4

Dlaczego nie użyć klatek kluczowych CSS3?

.twinkle { 
 
    background: red; 
 
    padding: 0.2em; 
 
    margin: 50px; 
 
} 
 

 
@-webkit-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-moz-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-ms-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
.twinkle { 
 
    -webkit-animation: twinkly 1s alternate infinite; 
 
    -moz-animation: twinkly 1s alternate infinite; 
 
    -ms-animation: twinkly 1s alternate infinite; 
 
    animation: twinkly 1s alternate infinite; 
 
}

<span class="twinkle">Special Offers &rsaquo;</span>

Można użyć awaryjne dla starszych przeglądarek wtedy. Wszystkie skrypty, które proponuje, są dobre, ale radzę rozwiązanie Ulana.

Answer 5

Jeśli podoba Ci się krótki kod, używaj plugin jquery-timing do sprawdzania czasu w jQuery. kurczy swój pełny kod do:

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$); 

Aha, i kiedy chcesz, aby przełączać się określoną liczbę razy (na przykład 20), a następnie piszesz

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20); 

Cool, eh?