JQuery Slideup الأساسي و Slidedown يقودني جنون!

Question

مهارات مسج بلدي جيدة بشكل طبيعي ولكن هذا يدفع لي جنون!

إنه بسيطة إلى حد ما أنا مشفرة من الصفر. باستخدام JQuery 1.3.2 لذلك لا ينبغي أن يكون هناك أي أخطاء القفز ولكن أساسا إذا ألقي نظرة على المثال:

http://www.mizudesign.com/jquery/accordian/basic.html.

أنا أعرض ارتفاع DIV الهدف على اليمين - إذا كان يحتوي على نص، فهذا يفكر أنه أقصر مما هو عليه والقفز. إذا كانت صورة لا توجد مشكلة.

لا أستطيع معرفة المكان الذي أخطئه - من الواضح أنه في مكان CSS في مكان ما، لكنني جربت كل المشتبه بهم المعتادين مثل العرض:

سوف تلقى بامتنان أية أفكار!

لك، كريس

PS يرجى أن يغفر طبيعة شفرة المصدر، لقد انفصلت عن المشروع بأكمله أنا أعمل عليه، لذلك فإنه يشمل بعض divs التي لا تحتاج حقا إلى هناك.

Answer 1

تحتاج إلى عرض أو ارتفاع على المحتوى لذلك لتحريك بسلاسة.

Answer 2

يجب أن أعترف أنني وجدت الحل الديناميكي الخاص بي الآن.

http://www.mizudesign.com/jquery/accordian/basic.html. يجب ان تصلح.

انها بسيطة جدا حقا - فقط تضيف الارتفاع باستخدام .css قبل إخفاء DIV. يعمل علاج :)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Answer 3

أعتقد أن المشكلة هي أنه عند إضافة الحشو أو الهامش ثم يقفز، كان هذا هو الحال بالنسبة لي. عليك أن تحريك الهامش في رد الاتصال

أيضا "ضع في اعتبارك" أن الجداول تتصرف عربات التي تجرها الدواب مع الشرائح المقلية واستخدام fadein fadeout

Answer 4

احصل على الارتفاع بمجرد انتهاء DIV الرسوم المتحركة الخاصة به من رد الاتصال. من الممكن أن تحصل على الارتفاع بينما يتم تحريك DIV، وأنت تحصل على قيمة انتقالية.

إذا كانت الرسوم المتحركة الخاصة بك ثاب، فحاول استخدام ردود الاحتياط. لا تفتح DIV وإخفاء DIV في نفس الوقت. بدلا من ذلك، إخفاء أول DIV الخاص بك، وداخل الاتصال تظهر div المقبل.

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

تحديث (من التعليقات):

المربع الاحمر: http://jqueryfordesigners.com/slideown-animation-jump-revisited/

Answer 5

كان لدي أيضا مزعج slideUp() القفز مشكلة حدثت في Safari، ولكن ليس Chrome أو IE. اتضح أن العلامة DIV كنت مختبئا / إظهار كانت أسفل علامة DIV أخرى تحتوي على float:left divs. أثناء الانزلاق، سيتم إعادة تقديم العائمة للحظات في القفزة.

كان الإصلاح مضيفا ببساطة clear:both إلى نمط إخفاء / عرض div.

Answer 6

مشكلتي هي أنه منذ أن حصلت الرسم المتجاوب لا أعرف ما سيكون عرض أو ارتفاع عنصري. بعد قراءة هذا آخر بلوق http://www.bennadel.com/blog/2263-use-jquery-s-slideown-with-fixed-width-elements-to-prevent-jumping.htm. أدركت أن jQuery كان يغير موقف عنصري إلى الثابتة والتعبئة مع تخطيط العنصر. أضفت ما يلي إلى CSS الخاص بي للعنصر ولم يلاحظ أي آثار جانبية سيئة في IE7 + و Firefox و Chrome and Safari.

display: none;  
overflow: hidden;
position: relative !important;   

Answer 7

استبدال القيم الأعلى والهامش أسفل الهامش مع قيم الحشو والقيم أسفل الحشو الخدعة بالنسبة لي. لا تنسى تعيين قيمة الهامش إلى 0 بعد هذا.

Answer 8

هذا عملت بالنسبة لي:

$(this).pathtoslidingelementhere.width($(this).parent().width());

Answer 9

من المقرر أن تكون المشكلة (وضع Quirks) في محاولة تقديم "الارتفاع: 0PX".

الإصلاح: تحريك الارتفاع إلى 1 (وليس 0)، ثم إخفاء وإعادة ضبط الارتفاع:

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Answer 10

بالنسبة لي، كانت المشكلة الهامش (أو الحشو) على DIV لإظهار / إخفاء مع الشريحة، ولكنني بحاجة إلى إعطاء الهامش (أو الحشو) بهذا الدف. لقد حلت مع هذه الخدعة:

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }