مسج Fadeout fadein مع لى العناصر المشكلة

Question

لدي يلي قائمة غير مرتبة:

<ul id="#lastcompanieslist">
<li style="display: none;" page="0">whatever 1</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 2</li>
<li style="display: none;" page="0">whatever 3</li>
<li style="display: none;" page="0">whatever 4</li>
<li style="display: none;" page="1">whatever 5</li>
<li style="display: none;" page="1">whatever 6</li>
<li style="display: none;" page="1">whatever 7</li>
<li style="display: none;" page="1">whatever 8</li>
</ul>
<p class="NextPrevious">
<img src="/Images/PreviousItem.jpg" id="previousbutton" /> 
<img src="/Images/NextItem.jpg" id="nextbutton" />
</p>

لدي مكافحة "actualpage هو اسم المتغير" مع الصفحة الحالية من جهة أخرى.

مع مسج أحاول الاختفاء التدريجي و fadein لى العناصر عندما ينقر المستخدم على هذا اثنين من الأزرار حسب العداد الفعلية الصفحة.

الخطوط التي im باستخدام fadeout و fadein هي التالية:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500);
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);

وتأثير العامل ، ولكن ايم وجود تأثير الخفقان ، البنود يبدأ في الاختفاء التدريجي ، ولكن للحظة قائمة أكبر في الارتفاع.عندما fadein كاملة ، القائمة يعود إلى الارتفاع الأصلي الحجم.

ماذا يمكن أن تكون المشكلة أو كيف يمكنني حلها ؟

شكرا مقدما.مع أطيب التحيات.Josema.

Answer 1

يبدو لي أن المشكلة الى حد كبير ومباشر.كنت تقوم بإنشاء قائمة, عادة, هذه قائمة البنود الخاصة بك مثل هذا

• البند 1
• البند 2
• البند 3

الخ, دعنا نقول القائمة أعلاه أن يبلغ ارتفاعه 3.الآن, إذا كان لي أن تتلاشى البند 1 و 2 كانوا تتلاشى 500 ميلي ثانية, و في النهاية تكون غير مرئية.عند هذه النقطة مسج التغييرات العرض من block إلى none, ، مما تسبب في المتصفح الخاص بك لإزالة عنصر من عرض القائمة الخاصة بك لديه ارتفاع 1.

الآن, إذا كان البند 3 كانت غير مرئية في البداية ، أود أن يكون لديك قائمة من ارتفاع 2 البند 1 و 2 يبدأ تتلاشى (إنهم لم يذهب حتى الآن), و بدأت تتلاشى في البند 3, مسج التغييرات عرض البند 3 'كتلة' تعطيني قائمة من ارتفاع 3 ، في حين يتلاشى (حتى 1 و 2 يتم الانتهاء من التلاشي ، يتم إزالتها).

ما يمكنك القيام به هو بدء تتلاشى بعد الانتهاء من الخاص بك تتلاشى مثل هذا:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500,
    function() {
       $('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500);
    }
);

الدالة التي يتم تمريرها كما المعلمة الثانية إلى الاختفاء التدريجي سوف يطلق عندما يتلاشى كاملة.سوف لا يزال من المحتمل رؤية وميض وجيزة بعد fadeOut وقبل fadeIn خلالها قائمة سوف يكون ارتفاع صفر.

نهج مختلف يكون لديك اثنين من قوائم منفصلة ، وضعت باستخدام المواقع المطلق أن تحتل نفس المساحة على صفحة ويب ، و تتلاشى بها في وقت واحد, ولكن هذا القليل من العمل.

Answer 2

مشكلتك هي أن تلاشيك لا ينتظر الانتهاء من التلاشي. هذا يجعل القائمة أكبر من كلاهما مجتمعة حتى يتم اختفاء الوقت الذي يختفي فيه التلاشي تمامًا.

على افتراض أن التأثير المطلوب هو أن يتلاشى تمامًا ثم تتلاشى الصحيحين فيك بعد:

$('#lastcompanieslist li[page!=' + actualpage.toString() + ']').fadeOut(500, function() {
$('#lastcompanieslist li[page=' + actualpage.toString() + ']').fadeIn(500); });

قد ترغب أيضًا في التفكير في تعيين CSS Min-Leight على UL الخاص بك لتقليل تأثير تقليله إلى 0 عناصر للقسمة في بقية الصفحة ، أو إذا كنت ترغب حقًا في الذهاب إلى المكسرات ، فيمكنك البدء عن طريق الإعداد ارتفاع ثابت لارتفاعه الحالي ، يتلاشى محتوىه الحالي ، وقم بتحريكه إلى الارتفاع المطلوب باستخدامه تحريك ثم تتلاشى في قائمتك الجديدة. هذا من شأنه أن يعطي أكثر انتقالية.

(إذا لم يكن هذا ما تتبعه ، فقم بتوضيح النتيجة المقصودة وسأعطيها لقطة أخرى =))