jQuery: Eerst fadeOut () forceren en daarna div () div

Op deze pagina, wanneer u op tekst klikt, moet div1 uitvagen en zichzelf verwijderen en div2 moet verschijnen. Het ding is script voorvoegend div2 eerst en dan div1 vervaagt uit. Hoe kan ik script forceren om div1 uit te laten faden en div2 vooraf in te voegen?

OPMERKINGEN:

  1. Dit is het eenvoudigste geval van mijn probleem. Stel me niet voor om alleen tekst of iets anders te veranderen, omdat op mijn webpagina die ik probeer uit te voeren, div's uitwisselen onvermijdelijk is (div's hebben veel gegevens).
  2. Ik moet prepend() gebruiken, dus geen append() of appendTo() suggesties.

Bij voorbaat dank.

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
Heb je geprobeerd de fadeIn in te stellen na het verwijderen in de callback van fadeout ?
toegevoegd de auteur Balint Bako, de bron

7 antwoord

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
toegevoegd
beste antwoord, bedankt
toegevoegd de auteur Kudayar Pirimbaev, de bron
Graag gedaan.
toegevoegd de auteur maqjav, de bron

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
toegevoegd
beste antwoord, bedankt
toegevoegd de auteur Kudayar Pirimbaev, de bron
Graag gedaan.
toegevoegd de auteur maqjav, de bron

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
toegevoegd

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
toegevoegd

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

Gebruik .delay (800) gewoon voor .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
toegevoegd

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

Gebruik .delay (800) gewoon voor .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
toegevoegd

U kunt .promise() en .done() gebruiken:

    $(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
toegevoegd