web-dev-qa-db-fra.com

Fondu simple en fondu en sortie avec jquery au clic

CE CODE CI-DESSOUS FONCTIONNE, vous pouvez lire les réponses ci-dessous - je le modifie pour référence future.

[~ # ~] 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');
        });
    });

DEMO en direct qui fonctionne

javascriptjqueryhidefade
10
user1562679

Votre problème est avec cette ligne de code:

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

Il n'y a pas de fonction .replace () dans jQuery. Supprimez cela et cela fonctionne:

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

Voir ici: http://jsfiddle.net/3XwZv/57/

11
Surreal Dreams

Utilisez le code jQuery suivant:

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

Vous devez utiliser html () au lieu de replace (). En outre, en supposant que vous souhaitiez remplacer votre div bancaire par le code HTML suivant:

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

Essaye ça

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