Javascript/jQuery: Få til en tidsbestemt funksjon som aktiverer slide-effekt

AnaXyd · 19. januar 2010

Heisann!

Komplisert emnetittel? Ja, men er så vanskelig å klare å definere mitt problem i kortvariant. Derfor skal jeg prøve litt bedre nå:

Jeg har benyttet meg av følgende jQuery effekt: Fading meny - replacing content

Jeg har brukt koden der, bare med litt modifikasjoner, slik at den passet mitt behov.

For de som vil se min kode, se i spoileren under:

java script:

		$(function(){

		$("#kat2-button").css({
			opacity: 0.3
		});
		$("#kat3-button").css({
			opacity: 0.3
		});
		$("#kat4-button").css({
			opacity: 0.3
		});
		$("#kat5-button").css({
			opacity: 0.3
		});

		$("#shocker li.button").click(function(){

			$clicked = $(this);

			// if the button is not already "transformed" AND is not animated
			if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {

				$clicked.animate({
					opacity: 1,
				}, 600 );

				// each button div MUST have a "xx-button" and the target div must have an id "xx" 
				var idToLoad = $clicked.attr("id").split('-');

				//we search trough the content for the visible div and we fade it out
				$("#slidercontent").find("div:visible").fadeOut("fast", function(){
					//once the fade out is completed, we start to fade in the right div
					$(this).parent().find("#"+idToLoad[0]).fadeIn();
					$(this).parent().find("div.prom-text").fadeIn();
					$(this).parent().find("div.readmore").fadeIn();
				})
			}

			//we reset the other buttons to default style
			$clicked.siblings(".button").animate({
				opacity: 0.5,
			}, 600 );

		});
	});

HTML:

<div id="shocker">
	<ul class="nav-thumbs">
	  <li id="kat1-button" class="button">
		<img src="<?php bloginfo('home'); ?>/images/shocker.pillow.png"/>
		<span>Overskrift1 - meny</span>
		<p>text</p>
	  </li>
	  <li id="kat2-button" class="button">
		<img src="<?php bloginfo('home'); ?>/images/shocker.pillow.png"/>
		<span>Overskrift2 - meny</span>
		<p>text</p>
	  </li>
	  <li id="kat3-button" class="button">
		<img src="<?php bloginfo('home'); ?>/images/shocker.pillow.png"/>
		<span>Overskrift 3 - meny</span>
		<p>text</p>
	  </li>
	  <li id="kat4-button" class="button">
		<img src="<?php bloginfo('home'); ?>/images/shocker.pillow.png"/>
		<span>Overskrift 4 - meny</span>
		<p>text</p>
	  </li>
	  <li id="kat5-button" class="button">
		<img src="<?php bloginfo('home'); ?>/images/shocker.pillow.png"/>
		<span>Overskrift 5 - meny</span>
		<p>text</p>
	  </li>
	</ul>
	<div id="slidercontent">
	  <div id="kat1">
		<img src="<?php bloginfo('home'); ?>/images/promoter.pillow.png" />
		<div class="prom-text">
		  <h2>Overskrift1</h2>
		  <p>text</p>
		  <div class="readmore">
			<p><a href="#">Les mer her!</a></p>
		  </div>
		</div>
	  </div><!--kat end-->
	  <div id="kat2">
		<img src="<?php bloginfo('home'); ?>/images/promoter.pillow.png" />
		<div class="prom-text">
		  <h2>Overskrift2</h2>
		  <p>text</p>
		  <div class="readmore">
			<p><a href="#">Les mer her!</a></p>
		  </div>
		</div>
	  </div><!--kat end-->
	  <div id="kat3">
		<img src="<?php bloginfo('home'); ?>/images/promoter.pillow.png" />
		<div class="prom-text">
		  <h2>Overskrift 3</h2>
		  <p>text</p>
		  <div class="readmore">
			<p><a href="#">Les mer her!</a></p>
		  </div>
		</div>
	  </div><!--kat end-->
	  <div id="kat4">
		<img src="<?php bloginfo('home'); ?>/images/promoter.pillow.png" />
		<div class="prom-text">
		  <h2>Overskrift4</h2>
		  <p>text</p>
		  <div class="readmore">
			<p><a href="#">Les mer her!</a></p>
		  </div>
		</div>
	  </div><!--kat end-->
	  <div id="kat5">
		<img src="<?php bloginfo('home'); ?>/images/promoter.pillow.png" />
		<div class="prom-text">
		  <h2>Overskrift5</h2>
		  <p>Text</p>
		  <div class="readmore">
			<p><a href="#">Les mer her!</a></p>
		  </div>
		</div>
	  </div><!--kat end-->
	</div>
  </div><!-- shocker -->

Det jeg rett og slett er ute etter er å få dette til å gå automatisk av seg selv. Altså at hver knapp blir valgt og innhold deretter etter f.eks hvert 10 sekund.

Er det noen måte å få til dette på? Det hadde vært ubersmooth om dere hadde visst om noe!

Håper på positivt svar!

Kaptein Snus · 20. januar 2010

setTimeout(statement, tid i ms) / setInterval(statement, tid i ms)

Endret 20. januar 2010 av Lek1

AnaXyd · 21. januar 2010

Takk! Var litt vanskelig dette, for meg som ikke har jobbet ALT for mye med Javascript før! Jeg har ihvertfall prøvd her, men det ser ikke ut til å funke helt optimalt. Noen som kan gi meg noen hint? Jeg er lysten på å lære, så fint om dere ikke kommer med løsningen med det første!

timer();
setInterval("timer()", 500);
function timer() {

		$("#kat2-button").css({
			opacity: 0.3
		});
		$("#kat3-button").css({
			opacity: 0.3
		});
		$("#kat4-button").css({
			opacity: 0.3
		});
		$("#kat5-button").css({
			opacity: 0.3
		});

		$("#shocker li.button").click(function(){

			$clicked = $(this);

			// if the button is not already "transformed" AND is not animated
			if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {

				$clicked.animate({
					opacity: 1,
				}, 600 );

				// each button div MUST have a "xx-button" and the target div must have an id "xx" 
				var idToLoad = $clicked.attr("id").split('-');

				//we search trough the content for the visible div and we fade it out
				$("#slidercontent").find("div:visible").fadeOut("fast", function(){
					//once the fade out is completed, we start to fade in the right div
					$(this).parent().find("#"+idToLoad[0]).fadeIn();
					$(this).parent().find("div.prom-text").fadeIn();
					$(this).parent().find("div.readmore").fadeIn();
				})
			}

			//we reset the other buttons to default style
			$clicked.siblings(".button").animate({
				opacity: 0.5,
			}, 600 );

		});
}

AnaXyd · 21. januar 2010

Nå har jeg prøvd masse forskjellige former for setInterval på funksjonen, men jeg får det ikke til. Er det mulig å legge den inn enkelt i eksisterende kode, eller må man lage en ny funksjon med timer og animasjonene som er for seg selv?

For det skal jo være mulig å trykke på menyknappene selv om den hovrer!

AnaXyd · 22. januar 2010

Som sagt, jeg er lysten på å lære! Så om ikke svaret, men et hint til hvordan jeg bør gjøre det hadde vært superb!

Kaptein Snus · 22. januar 2010

Er det hele koden eller bare et utdrag?

AnaXyd · 22. januar 2010

Det er hele JS koden som gjør animasjonen ja! Den bruker jo jQuery da, etter hva jeg har forstått.

Resultatet er her: Linky

Kaptein Snus · 22. januar 2010

Du kan ikke ha clickevent i timerfunksjonen, fordi selvom den kjører det scriptet vært 500ms, så må noen klikke på en av linkene for at den skal bytte bilde og sette ny opacity.

Et annet tips er at scriptet må vite hvilken av linkene som er current også må den finne neste link og sette den til opacity 1 og endre bildet.

Håper du skjønte

AnaXyd · 23. januar 2010

Ja, fant ut av at det ikke funket når den var avhengig av klikk!

Men er det ikke mulig å lage en animasjon for klikkinga, og en egen for selve animasjonen? Ved å enkelt endre den koden som allerede er, eller noe.

Jonas · 23. januar 2010

Du hadde i utgangspunktet en kode og alt det ser ut som du har gjort er å putte denne inni en setInterval. Men hva er det egentlig koden din gjorde? Jo, den initialiserte siden og implementerte klikkanimasjoner. Nå repeterer den bare denne prosessen i intervaller og det er ikke egentlig det du ønsker.

<script type="text/javascript">
$("#kat2-button").css({opacity: 0.3});
$("#kat3-button").css({opacity: 0.3});
$("#kat4-button").css({opacity: 0.3});
$("#kat5-button").css({opacity: 0.3});
$("#shocker li.button").click(function(){
	$clicked = $(this);
	if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
		$clicked.animate({opacity: 1,}, 600 );
		var idToLoad = $clicked.attr("id").split('-');
		$("#slidercontent").find("div:visible").fadeOut("fast", function(){
			$(this).parent().find("#"+idToLoad[0]).fadeIn();
			$(this).parent().find("div.prom-text").fadeIn();
			$(this).parent().find("div.readmore").fadeIn();
		})
	}
	$clicked.siblings(".button").animate({opacity: 0.5,}, 600 );
});
setInterval ( function () {
	// Find out which whatever is active
	// Simulate clicking the next one
}, 2000 );
</script>

Endret 23. januar 2010 av Jonas

AnaXyd · 26. januar 2010

Ah, så da trenger jeg å finne ut av resten av koden som gjør selve den automatiske slidinga? For er det en stor jobb? Om det er noe jeg ikke kommer til å klare på egenhånd må jeg få noen til å ordne det for meg, mot betaling selvsagt.

Endret 26. januar 2010 av AnaXyd

Jonas · 26. januar 2010

Takk, det blir 770,-.

var current = 0;
$(function(){
$("#kat2-button").css({opacity: 0.3});
$("#kat3-button").css({opacity: 0.3});
$("#kat4-button").css({opacity: 0.3});
$("#kat5-button").css({opacity: 0.3});
$("#shocker li.button").each(function(index){
	$(this).click(function(){
		current = index;
		$clicked = $(this);
		if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
			$clicked.animate({opacity: 1}, 600);
			var idToLoad = $clicked.attr("id").split('-');
			$("#slidercontent").find("div:visible").fadeOut("fast", function(){
				$(this).parent().find("#"+idToLoad[0]).fadeIn();
				$(this).parent().find("div.prom-text").fadeIn();
				$(this).parent().find("div.readmore").fadeIn();
			})
		}
		$clicked.siblings(".button").animate({opacity: 0.5}, 600);
	});
});
setInterval(function(){
	current++;
	if (current == $("#shocker li.button").length)
		current = 0;
	$($("#shocker li.button").get(current)).click();
}, 2000);
});

AnaXyd · 26. januar 2010

Oj! Det funka som bare svarte! Tusen takk! Sjekk PM.

Logg inn

Javascript/jQuery: Få til en tidsbestemt funksjon som aktiverer slide-effekt

Anbefalte innlegg

AnaXyd

Lenke til kommentar

Videoannonse

Kaptein Snus

Lenke til kommentar

AnaXyd

Lenke til kommentar

AnaXyd

Lenke til kommentar

AnaXyd

Lenke til kommentar

Kaptein Snus

Lenke til kommentar

AnaXyd

Lenke til kommentar

Kaptein Snus

Lenke til kommentar

AnaXyd

Lenke til kommentar

Jonas

Lenke til kommentar

AnaXyd

Lenke til kommentar

Jonas

Lenke til kommentar

AnaXyd

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer