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

01/11

Test af Apple Watch Series 10: Apples jubilæums-model er blevet lidt af en mester af det hele

01/11

Google Clouds netop fratrådte topchef har fundet sit nye job: Bliver en af de mest magtfulde personer hos ServiceNow

01/11

Nu går OpenAI efter struben på Google: ChatGPT fungerer nu også som en AI-søgemaskine

01/11

Nørgaard: Agenterne kommer, og jeg er klar: Måske bliver min gamle drøm snart virkelighed

01/11

Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem

01/11

Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver

01/11

Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre

01/11

Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'

01/11

Google indlemmer sin AI Gemini i Google Maps, Google Earth og Waze: Det kommer det til at betyde

01/11

Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner

01/11

Sådan blev Margrethe Vestager ’Silicon Valleys største fjende’

Vis flere artikler

IT-JOB

Udviklings- og Forenklingsstyrelsen

IT-generalist med flair for kommunikation til et produktionsstøtteteam

ATP

IT Security Specialist - for some of the most critical digital infrastructure in Denmark

Koda

Bliv webudvikler i Koda og vær med til at skabe et stærkere musikliv

Rambøll Management Consulting

Senior/Lead Software Engineer @ Ramboll Stakeholder Intelligence

Finanstilsynet

Projektleder

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 06:10	Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00	Datafordeler Af Lsk i PHP
I går 12:37	Summere beløb pr. dato Af TTA i Excel
31/1022:44	Tilslutte chassic fans Af viking69 i PC
31/1020:28	LED lysstofrør Af ErikHg i Fri debat