Gå til innhold

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

AnaXyd

Av AnaXyd
i Programmering og webutvikling

Anbefalte innlegg

AnaXyd

AnaXyd

Skrevet
Skrevet

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!

Videoannonse

Videoannonse
Annonse
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet

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

AnaXyd

Skrevet
  • Forfatter
Skrevet

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!

Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

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 :p

AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet

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

Jonas

Skrevet
Skrevet (endret)

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 av Jonas
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet (endret)

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 av AnaXyd
Jonas

Jonas

Skrevet
Skrevet

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);
});

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...