jQuery: Алдымен fadeOut () және кейін prepend () div мәжбүрлеу

Бұл бетте мәтінді басқанда, div1 өшіп, өзін жойып, div2 пайда болуы керек. Алдымен сценарийлерді div2 алдымен, содан кейін div1 жойылады. Сценарийді div1-ні қалай өшіріп, div2-ге қосуға қалай мәжбүрлей аламын?

ЕСКЕРТПЕЛЕР:

  1. Бұл менің ең қарапайым мәселе. Маған мәтінді немесе басқа бір нәрсені өзгертуді ұсынбаңыз, себебі менің веб-сайтымызда іске асыруға тырысамын, div-ның алмасуы сөзсіз (divның көп деректер бар).
  2. prepend() пайдалану керек, сондықтан ешқандай append() немесе appendTo() ұсыныстар жоқ.

Алдын-ала рақмет.

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
fadeIn > fadeIn дегенді кері қайтарудан кейін remove дегеннен кейін қоюға тырысты?
қосылды автор Balint Bako, көзі

7 жауаптар

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
қосылды
ең жақсы жауап, рахмет
қосылды автор Kudayar Pirimbaev, көзі
Қош келдіңіз.
қосылды автор maqjav, көзі

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
қосылды
ең жақсы жауап, рахмет
қосылды автор Kudayar Pirimbaev, көзі
Қош келдіңіз.
қосылды автор maqjav, көзі

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
қосылды

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
қосылды

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

.FadeIn ('div') үшін .delay (800) пайдаланыңыз.

$(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
қосылды

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

.FadeIn ('div') үшін .delay (800) пайдаланыңыз.

$(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
қосылды

.promise() және .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
қосылды