jQuery: forțând să fadeOut () și apoi prepend () div

Pe această pagină, atunci când faceți clic pe text, div1 trebuie să se estompeze și să se ștergă și div2 trebuie să apară. Lucrul este scriptul prepends div2 primul și apoi div1 estompează. Cum pot forta scenariul sa faca div1 sa dispara si apoi sa predea div2?

NOTE:

  1. Acesta este cel mai simplu caz al problemei mele. Nu-mi sugera să schimb doar text sau ceva alternativ, deoarece pe pagina mea de web pe care încerc să o pun în aplicare, schimbarea divului este inevitabilă (div are multe date).
  2. Trebuie să utilizez prepend (), deci nu adăugați() sau appendTo() sugestii.

Mulțumesc anticipat.

index.html

<!DOCTYPE HTML>
<html>

    <head>
        <script src = "http://code.jquery.com/jquery-1.10.1.min.js" type = "text/javascript"></script>
        <script src = "script.js" type = "text/javascript"></script>
    </head>

    <body>
        <div id = "div1">
            

This is div1

        </div>
    </body>

</html>

script.js

$(document).ready (function() {
    $(document).on ("click", "#text1", function() {

        $("#div1").fadeOut (function() {
            $(this).remove();
        });
        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
            .hide()
            .append ("

This is div2</div>") .fadeIn(); }); $(document).on ("click", "#text2", function() { $("#div2").fadeOut (function() { $(this).remove(); }); $("body").prepend ("<div id = 'div1'></div>"); $("#div1") .hide() .append ("

This is div1</div>")
            .fadeIn();
    });
});
0
Ați încercat să introduceți fadeIn după remove în apelul fadeout ?
adăugat autor Balint Bako, sursa

7 răspunsuri

Try like this: Example

$(document).on ("click", "#text1", function() {

    $("#div1").fadeOut (function() {

        $(this).remove();

        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
        .hide()
        .append ("

This is div2</div>") .fadeIn(); }); });

2
adăugat
cel mai bun răspuns, mulțumesc
adăugat autor Kudayar Pirimbaev, sursa
Cu plăcere.
adăugat autor maqjav, sursa

Try like this: Example

$(document).on ("click", "#text1", function() {

    $("#div1").fadeOut (function() {

        $(this).remove();

        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
        .hide()
        .append ("

This is div2</div>") .fadeIn(); }); });

2
adăugat
cel mai bun răspuns, mulțumesc
adăugat autor Kudayar Pirimbaev, sursa
Cu plăcere.
adăugat autor maqjav, sursa

Just move fadeIn into the callback. Check here: http://jsfiddle.net/balintbako/WGsGu/

$(document).ready(function() {
    $(document).on("click", "#text1", function() {

        $("#div1").fadeOut(function() {

            $(this).remove();
            $("body").prepend("<div id = 'div2'></div>");
            $("#div2")
                .hide()
                .append("

This is div2</div>") .fadeIn(); }); }); $(document).on("click", "#text2", function() { $("#div2").fadeOut(function() { $(this).remove(); $("body").prepend("<div id = 'div1'></div>"); $("#div1") .hide() .append("

This is div1</div>")
                .fadeIn();
        });
    });
});
1
adăugat

Just move fadeIn into the callback. Check here: http://jsfiddle.net/balintbako/WGsGu/

$(document).ready(function() {
    $(document).on("click", "#text1", function() {

        $("#div1").fadeOut(function() {

            $(this).remove();
            $("body").prepend("<div id = 'div2'></div>");
            $("#div2")
                .hide()
                .append("

This is div2</div>") .fadeIn(); }); }); $(document).on("click", "#text2", function() { $("#div2").fadeOut(function() { $(this).remove(); $("body").prepend("<div id = 'div1'></div>"); $("#div1") .hide() .append("

This is div1</div>")
                .fadeIn();
        });
    });
});
1
adăugat

You want like this? http://jsfiddle.net/yeyene/tcJF9/

Doar utilizați .delay (800) la .fadeIn ('div').

$(document).ready (function() {
    $(document).on ("click", "#text1", function() {

        $("#div1").fadeOut (function() {

            $(this).remove();

        });
        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
            .hide()
            .append ("

This is div2</div>") .delay(800).fadeIn(); }); $(document).on ("click", "#text2", function() { $("#div2").fadeOut (function() { $(this).remove(); }); $("body").prepend ("<div id = 'div1'></div>"); $("#div1") .hide() .append ("

This is div1</div>")
            .delay(800).fadeIn();
    });
});
0
adăugat

You want like this? http://jsfiddle.net/yeyene/tcJF9/

Doar utilizați .delay (800) la .fadeIn ('div').

$(document).ready (function() {
    $(document).on ("click", "#text1", function() {

        $("#div1").fadeOut (function() {

            $(this).remove();

        });
        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
            .hide()
            .append ("

This is div2</div>") .delay(800).fadeIn(); }); $(document).on ("click", "#text2", function() { $("#div2").fadeOut (function() { $(this).remove(); }); $("body").prepend ("<div id = 'div1'></div>"); $("#div1") .hide() .append ("

This is div1</div>")
            .delay(800).fadeIn();
    });
});
0
adăugat

Puteți folosi .promise() și .done() :

    $(document).on ("click", "#text1", function() {

       $("#div1").fadeOut (function() {
          $(this).remove();
       }).promise().done(function(){//<----here
          $("body").prepend ("<div id = 'div2'></div>");
          $("#div2")
             .hide()
             .append ("

This is div2</div>") .fadeIn(); }); }); $(document).on ("click", "#text2", function() { $("#div2").fadeOut (function() { $(this).remove(); }).promise().done(function(){//<----here $("body").prepend ("<div id = 'div1'></div>"); $("#div1") .hide() .append ("

This is div1</div>")
             .fadeIn();
       });
    });
0
adăugat