प्रभाव के साथ परिशिष्ट का उपयोग कर jQuery

Question

मैं कैसे .append()प्रभाव के साथ उपयोग कर सकते हैंshow('slow')

पर प्रभाव होने पर appendकाम करने के लिए प्रतीत नहीं होता है, और यह सामान्य के रूप में एक ही परिणाम देते हैं show()। कोई संक्रमण नहीं, कोई एनिमेशन नहीं।

मैं कैसे एक से दूसरे div जोड़ने और एक हो सकता है slideDownया show('slow')उस पर क्या प्रभाव होगा?

Answer 1

अपेंड पर प्रभाव होने से काम नहीं चलेगा क्योंकि ब्राउज़र प्रदर्शित होते ही सामग्री प्रदर्शित हो जाती है। इसलिए, मार्क बी और स्टीयरिक के उत्तरों को संयोजित करने के लिए:

वास्तव में आप इसे संलग्न करने से पहले जिस div को छुपा रहे हैं उसे स्टाइल करें। आप इसे इनलाइन या एक्सटर्नल CSS स्क्रिप्ट के साथ कर सकते हैं, या सिर्फ div बना सकते हैं

<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

शायद इनलाइन शैली था, जैसे "छिपा" जो प्रदर्शित करने के लिए बराबर है एक सीएसएस वर्ग को जोड़ने: कोई नहीं है .. "classier" (baddoom TSH);)

— DMP

यह काम नहीं करेगा। जब आप परिशिष्ट का उपयोग करते हैं, तो यह मूल_div लौटाएगा न कि नया जोड़ा गया तत्व। तो आप वास्तव में कंटेनर पर शो बुला रहे हैं।

— विक

@ यह होता .append()है के रूप में यह भी चयनकर्ता स्ट्रिंग नहीं लेता है। विचार का फिर भी सही है। धन्यवाद, अद्यतन।

— मैट बॉल

डेमो पूरी तरह से काम करता है, लेकिन यह मानता है कि सामग्री मौजूद है - इसलिए यदि आप सामग्री उत्पन्न कर रहे हैं तो यह काम नहीं करेगा, जैसे। एक शीर्षक या div बनाने के लिए छवि की पूरी सामग्री खींचना ...

— आकर्षित डेलो स्ट्रिटो

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 के लिए या 'slow'600ms के लिए स्ट्रिंग का उपयोग करें । या $("element").show(747)अपनी गति को परिभाषित करने के लिए (= 747ms) की तरह किसी भी संख्या को टाइप करें । डॉक्स देखें और एनीमेशन / अवधि देखें।

— Honk31

स्लाइड प्रभाव के साथ: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });

— केविन ग्रैबेर

मुझे टेम्पलेट से छिपने वाले भाग को बाहर रखना पसंद है

— lilalinux

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')।

— मैट बॉल

यह वास्तव में कारगर है; #newdiv बिट हालांकि गलत है और आप सही हैं, आप उन्हें चेन कर सकते हैं। मैंने अपना उत्तर अब संपादित कर लिया है।

— मार्क बेल

Answer 5

जब आप डिव के लिए अपील करते हैं, तो इसे छिपाएं और तर्क के साथ दिखाएं"slow" ।

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

Comments

छिपाने और दिखाने की घटना #img_container पर लागू होती है और पहले_दिवस पर नहीं, आपको ऐपेंडो का उपयोग करना चाहिए

— जेसुएलोपेज़

Answer 6

शुरू में सीएसएस के माध्यम से छिपाए जाने के लिए जोड़ा हुआ div सेट करें visibility:hidden।

Answer 7

मुझे इसी तरह के समाधान की आवश्यकता थी, फेसबुक जैसी दीवार पर डेटा जोड़ना चाहता था, जब पोस्ट किया जाता है, तो prepend()शीर्ष पर नवीनतम पोस्ट जोड़ने के लिए उपयोग करें, सोचा कि दूसरों के लिए उपयोगी हो सकता है ।।

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

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

ajax.php में कोड है

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;