Jquery fade effect på replaceing divs

[Dikki]

Hei

Jeg holder på å opprette en side for vår studentbedrift. Men har kommet over ett problem i Jquery som jeg ikke klarer å mestre. Jeg er fortsatt nybegynner, så lurer på om noen har med mer kompetanse kan hjelpe meg. Jeg copy paster mitt innlegg fra stackoverflow.com:

 

Ive been struggeling to find a solution for a fade effect with this script. Im still learning basic jquery, but cant seem to figure it out. I was hoping someone could help me. The script is working fine, the divs are replacing, but with no animation. I have tried with fadeToggle, fadeIn and fadeOut. But they always act weird. This is my mark up.

 

 

function HideContent(d) {

if(d.length < 1) { return; }

document.getElementById(d).style.display = "none";}

function ShowContent(d) {

if(d.length < 1) { return; }

document.getElementById(d).style.display = "block";

$('#' + d).fadeToggle('slow')

}

 

 

I call upon the script with onmouseclick. I got about 14 different divs.

 

 

<a onmouseclick="ShowContent('div1'); return true;" href="javascript:ShowContent('div1')> Link button </a>

 

 

and to go back:'

 

<a onmouseclick="HideContent('div1'); return true;" href="javascript:HideContent('div1')> BACK </a>

 

 

Any ideas?

"

http://stackoverflow.com/questions/10237136/jquery-fade-effect-on-replaceing-divs

 

 

Noen her som har noen forslag?

Endret 20. april 2012 av Dikki

[agrimsrud]

Du blander jQuery og vanlig javascript, og i tillegg bruker du onmouseclick og javascript som lenkeadresse. Det blir litt tungvint og gammeldags, og kan enkelt skrives om til mer effektiv jQuery.

 

// Først skjuler vi de aktuelle div'ene
$("#divs div").hide();

// Så setter vi funksjon på lenkene
$("nav a").click(function(e){

// Fade ut synlige div'er. 300 ms
$("#divs div").fadeOut(300);

// Hente målet fra lenken, vente 300ms, fade inn/ut dette
$($(this).attr("href")).delay(300).fadeToggle();

// Hindre lenkens vanlige funksjon
e.preventDefault();

});​

 

Bytt ut $("#divs div") med noe som passer på siden din. Kan også være en liste som $("#div1, #div2, #div3") osv.

 

Erstatt $("nav a") med noe som peker på lenkene dine.

 

Test koden her

Endret 20. april 2012 av agrimsrud

[Dikki]

Du blander jQuery og vanlig javascript, og i tillegg bruker du onmouseclick og javascript som lenkeadresse. Det blir litt tungvint og gammeldags, og kan enkelt skrives om til mer effektiv jQuery.

 

// Først skjuler vi de aktuelle div'ene
$("#divs div").hide();

// Så setter vi funksjon på lenkene
$("nav a").click(function(e){

// Fade ut synlige div'er. 300 ms
$("#divs div").fadeOut(300);

// Hente målet fra lenken, vente 300ms, fade inn/ut dette
$($(this).attr("href")).delay(300).fadeToggle();

// Hindre lenkens vanlige funksjon
e.preventDefault();

});​

 

Bytt ut $("#divs div") med noe som passer på siden din. Kan også være en liste som $("#div1, #div2, #div3") osv.

 

Erstatt $("nav a") med noe som peker på lenkene dine.

 

Test koden her

 

Jeg har prøvd koden men får den ikke til å reagere. Tingen er at jeg lager en type galleri. Jeg har masse bilder som vil fungere som linkene. Når en link blir klikket på forsvinner hele galleriet og blir byttet ut med den nye diven som skal fade in. Du kan se på en tidlig versjon av siden på www.ppilot.net .(her med mitt gamle javascript). Koden din fungere nok til mitt formål, men jeg har sikkert ikke nok forståelse innenfor jquery til å få den igang. Jeg setter veldig pris på at du har svart!! Jeg fordyper meg ikke i web design så jeg sliter veldig ved det tekniske

 

(så at menyen ikke fungerer som den skal heller lenger... crap)

Endret 20. april 2012 av Dikki