2012-09-25 9 views
10

DIESE CODE UNTER HERE FUNKTIONIERT, können Sie die Antworten unter hier lesen - ich bearbeite diese für zukünftige Referenz.Einfache Einblendung Ausblenden div mit Jquery auf klicken

HTML:

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div> 
<div id="btn-bk"><a href="#">back</a></div> 
<div id="bank">Bank Div</div> 
<div id="fancy">Fancy Div</div> 

CSS:

#bank {display:none;} 
#btn-bk {display:none;} 

Javascript:

$('#btn').click(function(e){  
    $('#fancy, #btn').fadeOut('slow', function(){ 
     $('#bank, #btn-bk').fadeIn('slow'); 
    }); 
}); 

    $('#btn-bk').click(function(e){  
     $('#bank, #btn-bk').fadeOut('slow', function(){ 
      $('#fancy, #btn').fadeIn('slow'); 
     }); 
    }); 

Live DEMO that works

+1

fügen Sie bitte versuchen, falls die jsfiddle verschwindet. – Niklas

Antwort

10

Ihr Problem ist mit dieser Codezeile:

$('#bank').replace('<div id="fancy"></div>').fadeIn('slow'); 

Es gibt keine .replace ist() Funktion in jQuery. Entfernen Sie das und es funktioniert:

$('#bank').fadeIn('slow'); 

es Siehe hier: http://jsfiddle.net/3XwZv/57/

+0

Beat mich dazu :) +1 für Geschwindigkeit – Kostia

+0

Argh !! Awesome ... Ich habe es schon so lange versucht, konnte nicht verstehen, warum es nicht die BANK zeigte ... Prost Mann! Thx wieder – user1562679

+0

Es * ist * eine .replace() Funktion, ist das, was Sie gesucht haben? Sehen Sie sich die Dokumentation unter http://docs.jquery.com/ an. Sie sind sehr hilfreich. Ich scanne oft einfach die Kategorien von Funktionen und sehe, ob sie haben, was ich will. Das Lesen interessanter Klangfunktionen wird Ihnen viel beibringen. –

3

Verwenden Sie den folgenden jQuery-Code:

$('#btn').click(function(e){  
    $('#fancy').fadeOut('slow', function(){ 
     $('#bank').fadeIn('slow'); 
    }); 
}); 
1

Sie HTML verwenden sollten() statt ersetzen(). Auch vorausgesetzt, Sie Ihre Bank div mit der folgenden HTML ersetzen mögen:

<div id="fancy"></div> 

dies in der Frage der gesamten Code

$('#btn').click(function(e){  
    $('#fancy').fadeOut('slow', function(){ 
     $('#bank').html('<div id="fancy"></div>').fadeIn('slow'); 
    }); 
}); 
+0

Ich stolperte tatsächlich über ein anderes Problem - ich brauche einen Zurück-Knopf, also wenn er geklickt hat, verblasst die Bank wieder und dann kommt die Phantasie wieder herein ... Ist das einfach zu implementieren? Wenn möglich, würde ich mich freuen, wenn Sie es der Geige hinzufügen könnten? – user1562679

+0

Entschuldigung für spät .. aber hast du dieses andere Problem lösen? – bipen

+0

nicht sicher ist das was du wolltest .. aber du kannst es versuchen .. http://jsfiddle.net/3XwZv/62/ – bipen