প্রভাব সহ append ব্যবহার jQuery

Question

আমি কীভাবে .append()প্রভাবগুলির সাথে ব্যবহার করতে পারিshow('slow')

এগুলির প্রভাবগুলি appendমোটেও কাজ করে বলে মনে হয় না এবং এটি সাধারণ হিসাবে একই ফলাফল দেয় show()। কোনও রূপান্তর নেই, কোনও অ্যানিমেশন নেই।

আমি কীভাবে একটি ডিভকে অন্য ডিভিডে যুক্ত করতে পারি এবং এর কোনও প্রভাব slideDownবা show('slow')প্রভাব ফেলতে পারি?

Answer 1

ব্রাউজারের প্রদর্শিত সামগ্রীটি ডিভ সংযোজন হওয়ার সাথে সাথেই আপডেট হয়ে যাবে বলে অ্যাপেন্ডে প্রভাব ফেললে কাজ হবে না। সুতরাং, মার্ক বি এবং স্টেরপাইক এর উত্তরগুলি একত্রিত করার জন্য:

আপনি প্রকৃতপক্ষে এটি সংযোজন করার আগে আপনি যে ডিভটি গোপন হিসাবে সংযুক্ত করছেন তা স্টাইল করুন। আপনি এটি ইনলাইন বা বাহ্যিক সিএসএস স্ক্রিপ্ট দিয়ে করতে পারেন, বা কেবল ডিভ হিসাবে তৈরি করতে পারেন

<div id="new_div" style="display: none;"> ... </div>

তারপরে আপনি আপনার সংযোজন ( ডেমো ) এ প্রভাবগুলি চেইন করতে পারেন :

$('#new_div').appendTo('#original_div').show('slow');

বা ( ডেমো ):

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');

Comments

সম্ভবত ইনলাইন স্টাইল ছিল, "লুকানো" এর মতো সিএসএস শ্রেণি যোগ করা যা প্রদর্শনের সমান: কোনওটিই নয় .. "শ্রেণিবদ্ধ" (বদডুম tsh);)

— ডিএমপি

এটি কাজ করবে না। আপনি যখন অ্যাপেনড ব্যবহার করবেন, এটি নতুন সংযুক্ত উপাদানটি না করে আসল_ডিব ফিরিয়ে দেবে। সুতরাং আপনি আসলে ধারকটিতে শো কল করছেন।

— ভিক

@ যেহেতু ঘটে যায় তা .append()কোনও নির্বাচক স্ট্রিংও নেয় না। ধারণাটি এখনও সঠিক। ধন্যবাদ, আপডেট হয়েছে।

— ম্যাট বল

ডেমো নিখুঁতভাবে কাজ করে, তবে এটি অনুমান করে যে বিষয়বস্তুটি বিদ্যমান - সুতরাং আপনি যদি বিষয়বস্তু তৈরি করে থাকেন তবে এটি কাজ করবে না। একটি শিরোনাম বা ডিভ তৈরির জন্য একটি চিত্রের Alt সামগ্রীটি টানছে ...

— ড্রিউ ডেলো স্ট্রিটো

Answer 2

সারমর্মটি হ'ল:

1. আপনি পিতামাতাকে 'অ্যাপেন্ড' বলছেন
2. তবে আপনি নতুন সন্তানের উপর 'শো' কল করতে চান

এটি আমার পক্ষে কাজ করে:

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

বা:

$('<p>hello</p>').hide().appendTo(parent).show('normal');

Comments

আমি এই দুটি উপায় চেষ্টা করেছি এবং এটি কার্যকর হয় না। সংযুক্ত সামগ্রীতে কোনও স্লাইডিং প্রভাব নেই।

— ক্রিস 22

'normal'গতির জন্য উপযুক্ত স্ট্রিং নয়। কোনও সংক্রমণের জন্য এটিকে ফাঁকা রাখুন (অবিলম্বে প্রদর্শিত হবে)। 'fast'200ms বা 600ms এর জন্য স্ট্রিং ব্যবহার করুন 'slow'। বা $("element").show(747)নিজস্ব গতি নির্ধারণ করতে (= 747ms) এর মতো যে কোনও সংখ্যা টাইপ করুন । দেখতে ডক্স এবং অ্যানিমেশন / সময়কাল জন্য, দেখুন।

— honk31

স্লাইড প্রভাব সহ: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });

— কেভিন গ্র্যাবার

আমি লুকানো অংশটি টেমপ্লেটের বাইরে রাখতে চাই

— লিল্লিনাক্স

Answer 3

আগত ডেটা (যেমন একটি এজ্যাক্স কল থেকে) এর সাথে কাজ করার সময় অন্য উপায়:

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();

Answer 4

কিছুটা এইরকম:

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

এটা করা উচিত?

সম্পাদনা: দুঃখিত, কোডে ভুল হয়েছে এবং মেটের পরামর্শ বোর্ডেও নিয়েছে।

Comments

নিশ্চিত হতে পারছি না যে সে কি চায় না, কিন্তু তাই যদি, আপনি শৃঙ্খল ফাংশন চাই: $('#divid').append('#newdiv').hide().show('slow')।

— ম্যাট বল

এটি কাজ করে; # নিউডিভ বিটটি যদিও ভুল এবং আপনি সঠিক, আপনি তাদের শৃঙ্খলাবদ্ধ করতে পারেন। আমি এখন আমার উত্তর সম্পাদনা করেছি।

— মার্ক বেল

Answer 5

আপনি যখন ডিভের সাথে যুক্ত হন, এটি আড়াল করুন এবং যুক্তি দিয়ে এটি দেখান"slow" ।

$("#img_container").append(first_div).hide().show('slow');

Comments

লুকান এবং শো ইভেন্টটি # আইএমজি_কন্টেইনারে প্রযোজ্য এবং প্রথম_ডিবায় নয়, আপনার অ্যাপেন্ডটো ব্যবহার করা উচিত

— জেসুওলোপেজ

Answer 6

প্রাথমিকভাবে CSS এর মাধ্যমে আড়াল হওয়া ডিভ সেট করুন visibility:hidden।

Answer 7

আমি একই ধরণের সমাধানের প্রয়োজন ছিলাম, ফেসবুকের মতো কোনও দেয়ালে ডেটা যুক্ত করতে চেয়েছিলাম, যখন পোস্ট করা হয়, prepend()উপরের সর্বশেষতম পোস্টটি যুক্ত করতে ব্যবহার করতাম, অন্যের পক্ষে উপকারী হতে পারে বলে ভেবেছিলেন ..

$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });   

এজ্যাক্স.এফপি কোডটি হয়

if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

Answer 8

আপনি কেন কেবল লুকিয়ে রাখবেন না, সংযোজন করুন, তারপরে দেখান:

<div id="parent1" style="  width: 300px; height: 300px; background-color: yellow;">
    <div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>


<div id="parent2" style="  width: 300px; height: 300px; background-color: green;">
</div>

<input id="mybutton" type="button" value="move">

<script>
    $("#mybutton").click(function(){
        $('#child').hide(1000, function(){
            $('#parent2').append($('#child'));
            $('#child').show(1000);
        });

    });
</script>

Answer 9

যদি আপনি অ্যানিমেশন ব্যবহার করেন তবে মসৃণ দেখানো সম্ভব। শৈলীতে কেবল "অ্যানিমেশন: 1 এস দেখান" যোগ করুন এবং পুরো উপস্থিতি কীফ্রেমে বৈষম্য।

Answer 10

আমার ক্ষেত্রে:

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

আপনি দৃশ্যমানতার সাথে আপনার সিএসএস সামঞ্জস্য করতে পারেন: লুকানো -> দৃশ্যমানতা: দৃশ্যমান এবং রূপান্তরগুলি সমন্বয় ইত্যাদি ট্রানজিশন: ভিজিবিলিটি 1.0;