Avatar billede Slettet bruger
15. marts 2011 - 14:28 Der er 8 kommentarer og
2 løsninger

Jquery - Blink tekst et par gange og stop så

Hej hvordan kan jeg et div til at blinke - og så stoppe efter et par gange (el. eksempelvis efter 5 sekunder)?

Denne kode fortsætter i det uendelige med at blinke, men måske et lettere omskrivning?!

script type="text/javascript">
    var blink = function(){
        $('#blinker').toggle();
    };
    $(document).ready(function() {
        setInterval(blink, 500);
    });
</script>

<div id="blinker">Jeg blinker</div>
Avatar billede phillips Nybegynder
15. marts 2011 - 14:36 #1
<script type="text/javascript">
    var counter = 0;
    var blink = function(){
        if( counter <= 3 ){
            counter++;
            $('#blinker').toggle();
        } else {
            clearInterval(blink);
        }
    };
    $(document).ready(function() {
        var counter = setInterval(blink, 500);       
    });
</script>
Avatar billede Slettet bruger
15. marts 2011 - 14:36 #2
Hmm ja, jeg har fundet den her, men måske ikke så elegant, men det gør da, hvad den skal:

<script type="text/javascript">
$(document).ready(function()
{
  //first slide down and blink the message box
  $("#object").animate({
  top: "0px"
  }, 200 ).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200);
  //close the message box when cross red image is clicked
  $("#close_message").click(function()
  {
    $("#object").fadeOut("slow");
  });
});
</script>
Avatar billede softspot Forsker
15. marts 2011 - 14:37 #3
Noget i stil med dette:

<script type="text/javascript">
    var antal = 0;
    var blink = function(){
        $('#blinker').toggle();
        if(++antal < 10)
            setTimeout(blink, 500);
    };
    $(document).ready(function() {
        blink(blink);
    });
</script>
Avatar billede Slettet bruger
15. marts 2011 - 14:38 #4
Ah ja, den er også god... Svar gerne og jeg smider pointene af sted. Tak for input... det var hurtig hjælp :-)
Avatar billede softspot Forsker
15. marts 2011 - 14:52 #5
Det var nu ikke min mening, at komme med et alternativ til din animate-løsning og phillips' foreslag, men de var der bare ikke da jeg "forfattede" mit! :D
Avatar billede Slettet bruger
15. marts 2011 - 14:57 #6
Skidt med det - løsningen blev fikset. Med 94K point, gør du det vist heller ikke kun for pointene :-) Jeg er i hvert flad glad for hjælpen fra jer begge.
Avatar billede softspot Forsker
15. marts 2011 - 15:03 #7
Tak og velbekomme :-)
Avatar billede olebole Juniormester
15. marts 2011 - 16:31 #8
<ole>

- og i dejlig overskuelig kode, hvor man tydeligt kan se, hvad der sker - og ikke bruger ressourcer på overflødige processer, der ikke umiddelbart kan gennemskue (og endda på lidt færre kodelinjer):


<div id="foo" style="width:50px;height:50px;background:red">TEST</div>

<script type="text/javascript">
function doBlink(sId, nBlink, nDelay) {
    var i = 0;
    doBlink[sId] = setInterval(function(){
        css = document.getElementById(sId).style;
        css.visibility = css.visibility=="hidden" ? "visible" : "hidden";
        if (++i>=nBlink*2) clearInterval(doBlink[sId]);
    }, nDelay||300);
}

doBlink("foo",4,600);
</script>



/mvh
</bole>
Avatar billede olebole Juniormester
15. marts 2011 - 16:34 #9
PS:
sId (elementets ID) er obligatorisk

nBlink (antal blink) er obligatorisk

nDelay (blinklængde i msec) er valgfri (default = 300)
Avatar billede Slettet bruger
16. marts 2011 - 01:31 #10
$("#object").fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200);

Dét er fikst, selvom det bruger lidt "ressourcer" bag gardinerne..

Der er også en fadeTo, hvis den ikke skal slukke helt i "mørkefasen":
$("#object").fadeTo(200,0.25).fadeTo(200,1).fadeTo(200,0.25).fadeTo(200,1).fadeTo(200,0.25).fadeTo(200,1).fadeTo(200,0.25).fadeTo(200,1);
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester