Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1

    JQUERY Eliminazione div con delay

    Salve, sto uscendo pazzo su una probabile cavolata.
    Sfruttando JQuery ho adattato un po gli esempi per creare un effetto slide per fare la transizione tra una div e l'altra nella pagina.
    Il codice che segue mi crea 1 div e mi elimina la precedente all'infinito.
    Il problema è che non riesco ad eliminare la vecchia div utilizzando il delay mentre con il remove secco funziona. Avete qualche idea?

    Ecco il codice:

    <script>

    var indice_pagine=1;
    var pagina_prec=0;

    $("#go").click(function(){

    $('.pagine').append("<div id='pagina"+ indice_pagine +"' class='pagina'>Pagina Attuale: "+ indice_pagine +"
    Vecchia pagina: "+ pagina_prec +"</div>");
    //$("#pagina"+pagina_prec).clone().attr("id","pagina "+indice_pagine).appendTo(".pagine");

    //SLIDE ENTRATA DA DX DELLA PAGINA NUOVA
    $("#pagina"+indice_pagine).animate({
    opacity: 1,
    marginLeft: "0",
    }, 1000 ).queue(function() {
    $(this).css({position: "relative"});
    });

    //$("#pagina"+pagina_prec).delay(1000).queue(functio n() { $(this).remove(); }) //CON QUESTO NON FUNZIONA
    $("#pagina"+ pagina_prec).remove(); //CON QUESTO FUNZIONA

    //incremento i contatori della pagina
    pagina_prec=indice_pagine;
    indice_pagine=indice_pagine+1;

    });

    </script>

    <button id="go">SFOGLIA</button>


    <div id="pagine" class="pagine"></div> //CONTENITORE PER LE PAGINE
    chicone

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,651
    Così? $("#pagina"+pagina_prec).delay(1000).remove();

    il queue ti serve?

  3. #3
    Grazie della risposta!
    Così come mi hai proposto ho già provato e funziona ma purtroppo mi rimuove direttamente il div e non fa il delay, non so come mai. io invece ho bisogno che sia eliminato una volta che il nuovo div è entrato in scena.
    Googlando ho quindi trovato l'altro sistema (queue) che però mi da l'altro problema.
    smanettando mi sono reso conto che probabilmente è un problema legato all'aggiornamento dei contatori, ho provato a dare anche a loro un ritardo, ma non funziona comunque.
    chicone

  4. #4
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,651
    http://api.jquery.com/append/

    nel secondo esempio si puo usare la function , se non error viene eseguita dopo la insert dell elemento. Se non ho capito male puoi far rimuovere con questa il vecchio div

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    scusa ma non puoi utilizzare la callback function della funzione animate?

    qualcosa del genere:

    codice:
    var indice_pagine=1;
    var pagina_prec=0;
    
    $("#go").click(function(){
    
    $('.pagine').append("<div id='pagina"+ indice_pagine +"' class='pagina'>Pagina Attuale: "+ indice_pagine +"
    Vecchia pagina: "+ pagina_prec +"</div>");
    //$("#pagina"+pagina_prec).clone().attr("id","pagina"+indice_pagine).appendTo(".pagine");
    
    //SLIDE ENTRATA DA DX DELLA PAGINA NUOVA
    $("#pagina"+indice_pagine).animate({
    opacity: 1,
    marginLeft: "0",
    }, 1000, function() {
        $("#pagina"+ pagina_prec).remove();
        pagina_prec=indice_pagine;
        indice_pagine++;
      } ).queue(function() {
    $(this).css({position: "relative"});
    });

  6. #6
    Grazie mille ad entrambi!
    Appena rientro provo le soluzioni proposte.
    A dopo.
    chicone

  7. #7
    Ok, il codice proposto da Vindav risolve alla grande il mio problema!
    Resta solamente un difetto position:
    la pagina che viene caricata appare sotto alla precedente e non si sovrappone fino a quando fatta la transizione viene eliminata la precedente; a quel punto scatta in alto e prende il posto della vecchia.
    Io invece vorrei che entrasse proprio sovrapponendosi alla precedente.
    Per fare questo ho aggiunti questa riga

    $("#pagina"+indice_pagine).css({position: "absolute"});

    Ma niente da fare.

    //SLIDE ENTRATA DA DX DELLA PAGINA NUOVA
    $("#pagina"+indice_pagine).animate({
    opacity: 1,
    marginLeft: "0",
    }, 1000, function() {
    $("#pagina"+ pagina_prec).remove();
    pagina_prec=indice_pagine;
    indice_pagine++;
    } ).queue(function() {
    $(this).css({position: "relative"});
    });

    Questo è il foglio di stile inerente

    div.pagina {
    position:absolute;
    background-color:#bca;
    width:100%;
    min-height: 360px;
    /*border:1px solid green;*/
    opacity: 0;
    margin-left:500%;
    }

    L'idea era che inizialmente il div che entra ha posizione assoluta e dopo quando viene eliminato l'altro diventa relativo.
    Grazie ancora!
    chicone

  8. #8
    Ho provato a modificare il codice aggiungendo un altro effetto per vedere se riuscivo a levarmi di giro la vecchia div, adesso contemporaneamente entra la nuova e esce la vecchia.
    Nonostante questo la nuova entra posizionata sotto alla vecchia e poi scala su quando la vecchia viene eliminata al termine dell'animazione.

    Ecco il codice

    <button id="go">SFOGLIA</button> <button id="elimina">ELIMINA</button>
    <script>

    $("#go").click(function(){

    $('.pagine').append("<div id='pagina"+ indice_pagine +"' class='pagina'>Pagina Attuale: "+ indice_pagine +"
    Vecchia pagina: "+ pagina_prec +"</div>");

    //SLIDE ENTRATA DA DX DELLA PAGINA NUOVA
    $("#pagina"+indice_pagine).animate({
    opacity: 1,
    marginLeft: "0",
    }, 1000, function() {
    $(this).css({position: "relative"});
    });

    //SLIDE USCITA VECCHIA PAGINA
    $("#pagina"+pagina_prec).animate({
    opacity: 0,
    marginLeft: "-100%",
    }, 1000, function() {
    $(this).remove();
    pagina_prec=indice_pagine;
    indice_pagine++;
    });

    });

    </script>
    chicone

  9. #9
    Risolto, ho aggiunti

    float:left;

    nello stile della pagina che entra.

    Grazie a tutti!
    chicone

  10. #10
    jquery è il male assoluto!
    La violenza è l'ultimo rifugio dell'incompetente - Isaac Asimov

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.