JQuery bascule entre des divs existants

Question

J'ai trouvé de nombreux plugins jQuery qui vous permettent de "tourner" un élément ; le plugin de SmashUp Labs, Flip!, semble le plus populaire/utilisé, et c'est ce que j'utilise actuellement.

Entre-temps, il y a bien entendu de nombreuses solutions ici et ailleurs pour basculer entre deux div existants différents, mais aucun d'entre eux n'aborde le retournement.

Mais ce dont j'ai besoin, c'est que les deux choses se produisent. Le problème que je rencontre avec Flip! est qu'il inclut le contenu dans l'appel de fonction, alors que je veux en réalité utiliser le retournement pour basculer entre deux div existants différents. J'ai réussi à obtenir un aspect plus ou moins correct en utilisant un iframe, mais alors j'utilise un iframe assez inutile et je dois également attendre que ce cadre se charge après le retournement, ce qui est moche.

Les "côtés" du div retourné sont trop volumineux et complexes pour être raisonnablement insérés dans l'appel de fonction, et je ne peux pas utiliser quelque chose comme $('div').text() car cela crée une copie du div plutôt que de révéler celui que j'ai déjà.

Alors, est-ce que quelqu'un connaît une bibliothèque qui effectue un retournement, mais qui vous permet de spécifier un élément à rendre visible une fois le retournement terminé ? Ou est-ce que quelqu'un a déjà fait ce genre de chose avec Flip!, peut-être en utilisant ses fonctions de rappel ?

Answer 1

Vous pourriez essayer de placer les deux divs au-dessus de la boîte retournable, en utilisant la position absolue en CSS, de sorte que le contenu de la div soit au-dessus de l'arrière-plan de la boîte retournable, donnant l'impression qu'il est dans la boîte.

Par exemple, vous avez div1 et div2, par défaut lorsque la page se charge, div1 s'affiche et div2 a le style display:none, ensuite vous liez les rappels dans Flip comme suit:

$("#flipbox").flip({
    direction:'tb',
    onBefore: function(){
        $('#div1').hide();
    },
    onEnd: function(){
        $('#div2').show();
    }
});

Les contenus des div1 et div2 sont au dessus de la boîte retournable, donc ils donnent l'impression d'être contenus.