قم بتوسيع Div مع الرسوم المتحركة

Question

لدي Div يتلقى محتوى من مكالمة Ajax. الآن أنا فقط أفعل هذا في معالج رد الاتصال Ajax:

function searchCallback(html) { $("#divSearchResults").html(html); }

هذا يجعل المحتوى "pop" على الصفحة ، وهو مفاجئ للغاية. هل هناك طريقة لجعل div تغيير حجمها بأمان ، مثل طريقة .slidetoggle ()؟

Answer 1

هل يمكن أن تخفي لتبدأ. ثم أدخل HTML وعندما تتم هذه الوظيفة ، قم بتأثير العرض عليها. (مثل انزلاقك)

Answer 2

تأكد من مخفيته ، ثم أضف المحتوى وحركه فقط.

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

أو يمكنك أن تتلاشى في:

$("#divSearchResults").fadeIn();

للتأكد من أن صفحتك لا "تنفجر" عندما يظهر المحتوى ، تأكد من إخفاء Div مع. تأكد أيضًا من أنه بمجرد إضافة المحتوى ، تبدو الصفحة جيدة.

Answer 3

لست متأكدًا من أن هذا سيعمل ، ولكن يستحق المحاولة:

• اكتشف حجم DIV الحالي وقم بتعيينه.
• تحديث HTML
• تحريك الارتفاع والعرض إلى "السيارات".

Answer 4

بالتأكيد ، يمكنك تجربة هذا:

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

ليس أجمل شيء ولكنه سيعمل. يمكنك أن تتمكن من ذلك من خلال صنع نمط CSS للفصل "Hidden_Insert" الذي من شأنه أن يجعل عنصرًا مع هذا الفئة مخفية بشكل افتراضي. أيضًا ، على الواجهة الخلفية ، حيث ترسل هذا التاريخ من ذلك ، يمكنك القيام بالالتفاف هناك بدلاً من JavaScript الخاص بك. يمكن بعد ذلك تبسيط البرنامج النصي إلى شيء مثل:

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

لم أختبر أيًا من هؤلاء ولكن يجب أن يعملوا.