jQuery: fadeOut () প্রথমে জোরপূর্বক এবং তারপরে () div

এই পৃষ্ঠায়, যখন আপনি পাঠ্যতে ক্লিক করেন, div1 অবশ্যই বিবর্ণ হয়ে যাবে এবং নিজেকে মুছে ফেলবে এবং div2 অবশ্যই উপস্থিত হবে। জিনিস স্ক্রিপ্ট div2 প্রথম এবং তারপর div1 fades আউট prepends। কিভাবে div1 তৈরি করতে স্ক্রিপ্টকে জোর করা যায় এবং তারপরে div2 প্রিন্ট করতে পারি?

নোট:

  1. এটি আমার সমস্যার সবচেয়ে সহজতম বিষয়। আমার ওয়েবপৃষ্ঠায় যেটি বাস্তবায়ন করার চেষ্টা করছি তার থেকে পাঠ্য বা কিছু বিকল্প পরিবর্তন করতে আমাকে পরামর্শ দিও না, ডিভির ইন্টারভিউ করা অনিবার্য (div এর অনেক তথ্য আছে)।
  2. আমাকে অবশ্যই প্রিপেন্ড() ব্যবহার করতে হবে, তাই কোন যোগসূত্র() যোগ করুন অথবা যোগ করুন() পরামর্শগুলি।

আগাম ধন্যবাদ.

এ 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 টি fadeout এর কলব্যাকে সরান পরে দেওয়ার চেষ্টা করেছেন?
যোগ লেখক 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/

শুধু .delay (800) ব্যবহার করুন। 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
যোগ

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

শুধু .delay (800) ব্যবহার করুন। 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
যোগ

আপনি .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
যোগ