Hjälp med simpel jQuery.

2013-07-10, 14:13 #1

Medlem

Reg: Aug 2008

Inlägg: 1 220

Håller på att försöka lära mig jQuery och har gjort ett litet script...som inte fungerar... varför?

Det jag vill ska hända när man öppnar sidan är att min #hejsan id (som är en h1) ska fadea in samtidigt som den animeras lite subtilt från vänster.

koden:

Kod:

		<script type="text/javascript">
			$(document).ready(function(){
				$("#hejsan").animate({left: '+=20px'}, 500);
				$("#hejsan").fadeTo(500, 1);
			});
		</script>

Citera

2013-07-10, 23:11 #2

Medlem

Reg: Mar 2012

Inlägg: 28

Hejsan, jag är själv rätt ny inom jQuery, men problemen jag hittar är:

Din text måste redan vara "svag", annars "Fadear" din text till något som redan har full synlighet.
Har du kollat så du länkat till ett jQuery dokument i din html kod.
Din text är redan längst till vänster, använd css för att flytta texten lite till höger innan.

Annars skulle du kunna använda FadeIn() funktionen istället för FadeTo() för att göra det enklare och slippa problem med din synlighet. Du hittar mer här.

Edit: Läste fel, såg nu att texten skulle flyttas till höger.

Citera

2013-07-11, 00:21 #3

Medlem

Reg: Aug 2006

Inlägg: 870

Ge din h1 något att börja animera från, kanske:

Kod:


#hejsan {

  opacity: .2;

  position: relative; /* så att "position-left"-förändringar märks */

}

Överväg ev. att i verkligheten använda CSS istället för JavaScript för sådant här, typ:

Kod:


@keyframes povel {

  0%   { opacity: 0; left: 0px;}

  100% { opacity: 1; left: 20px;}

}

#hejsan {

  position: relative;

  animation: povel ease-in-out 1.5s 1 forwards;

}

/p

__________________
Senast redigerad av Povel 2013-07-11 kl. 00:32.

Citera

Hjälp med simpel jQuery.

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in