CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

sir_madsen Nybegynder

19. oktober 2011 - 20:16 Der er 9 kommentarer og
1 løsning

Blinkende logo via fade i JQuery

Hej,

Jeg har et billed som skal stå og små blinke (fade frem og tilbage) hele tiden så snart man kommer ind på siden. Jeg har prøvet at søge efter et script hvor dette kan lade sig gøre, men ingen af dem har været fyldestgørende.

Kan nogle af jer vise et script hvor dette kan lykkedes, eller henvise mig til en tutorial omkring dette.

Mvh. Martin

Synes godt om

jokkejensen Novice

19. oktober 2011 - 20:37 #1

function foo() {
jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000})
.animate({opacity: 0}, {duration: 3000})
.animate({opacity: 0}, {duration: 3000})
.animate({opacity: 1.0}, {duration: 3000, complete: foo})
}

kilde, http://stackoverflow.com/questions/1301529/jquery-fade-with-loop-and-delay

Der er så 6sec delay på, det fjerner du bare vha de 2 midterste .animate, men eksemplet viser hvordan du sætter animationer i kø, og rekursivt fyrer dem af.

Han advarer mod at det kan koste lidt ressourcer :)

/J

Synes godt om

sir_madsen Nybegynder

19. oktober 2011 - 20:50 #2

Nu er jeg slet ikke den store JQuery haj.

Men hvis du skulle lave et færdigt udkast af koden hvorndan ville den så se ud? Syntes nemlig ikke jeg kan få det til at fungere.

Synes godt om

jakobdo Ekspert

19. oktober 2011 - 20:58 #3

Måske du kunne overveje jquery cycle.

http://jquery.malsup.com/cycle/browser.html

Du kunne bruge fade og 2 billeder, så kan dit billede stå og "blinke".

Synes godt om

jokkejensen Novice

19. oktober 2011 - 21:19 #4

<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
logoFlash();
function logoFlash() {
$("#logo").fadeOut("slow").fadeIn("slow", doFading);
}
});
</script>
</head>
<body>
<img src="http://www.google.com/images/srpr/logo3w.png" id="logo" />
</body>
</html>

Synes godt om

jokkejensen Novice

19. oktober 2011 - 21:19 #5

<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/ (...)
<script type="text/javascript">
$(document).ready(function () {
logoFlash();
function logoFlash() {
$("#logo").fadeOut("slow").fadeIn("slow", logoFlash);
}
});
</script>
</head>
<body>
<img src="http://www.google.com/ (...) id="logo" />
</body>
</html>

Synes godt om

sir_madsen Nybegynder

26. oktober 2011 - 14:30 #6

Tak for hjælpen jokke, men kunne ikke helt få det til at virke. Men du får pointene

Synes godt om

jokkejensen Novice

26. oktober 2011 - 15:22 #7

Den blinker altså fint hos mig, prøv lige at tage det herfra, kan godt se mine links fucker lidt op :/

http://pastebin.com/NLV4gmtF

/J

Synes godt om

sir_madsen Nybegynder

26. oktober 2011 - 20:24 #8

Jeg kan godt se det virker. Virker også hos mig nu. Men er det muligt og gøre det sådan at det ikke går så hurtigt? Har prøvet at lege lidt med millisekunder, men det ser ikke ud til der sker mere. Samtidig skal opacity ikke være lig 0...

Synes godt om

jokkejensen Novice

27. oktober 2011 - 07:55 #9

$("#logo").animate({opacity: 0.25},2500).animate({opacity: 1}, 2500, logoFlash);

de 2500 er millisekunder, opacity er procent der skal fades.

(kan ikke lige teste her)

Synes godt om

sir_madsen Nybegynder

27. oktober 2011 - 11:43 #10

Super. Mange tak. Jeg har bare lige et sidste lille spørgsmål.

Hvordan kan det være at billedet overlapper det andet, når jeg sætter denne effekt på. (Før denne effekt lå skyggen over tilbuds-knappen.

Du kan se det her: http://www.madsendesign.dk/sikkerbyg/kontakt.php

Men kan se at skyggen lige bliver en smule synlig når knappen bliver transparent, men når den bliver opacity er 1, så forsvinder skyggen ned bag knappen. Har arbejdet lidt med z-index, men det er vist ikke løsningen.

Og btw, pointene er selvfølgelig dine:)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Kodning af element i custom css Af Jacob Hedelund i Andet programmering	3	14/10/202410:35	14/10/202419:46
Delphi 11 - converter webp til jpg fil Af juzas i Andet programmering	5	12/10/202413:28	14/10/202403:54
Trim tekst i batch script Af Dan Elgaard i Andet programmering	5	05/09/202411:08	10/09/202415:29
ASP Classic fil fra subfolder Af bsn i Andet programmering	3	07/05/202416:14	08/05/202401:00
Session Variable Af bsn i Andet programmering	3	01/05/202409:44	02/05/202409:29

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS