كيفية جعله أكثر سلاسة مع تبديل ("بطيء")

StackOverflow https://stackoverflow.com/questions/990622

  •  13-09-2019
  •  | 
  •  

سؤال

لدي الكود التالي الذي يعمل ولكن يصبح ثاب قليلا في نهاية كل إجراء تبديل.

هل سيكون أكثر سلاسة إذا قمت بتبديل الفقرة؟

أحاول الحصول على الفقرة، لكنني لا أعرف كيف أفعل ذلك.

هل من الممكن ان يساعدني احد من فضلكم؟

شكرا لك مقدما.

<head>

<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9; 
}
.morepara {
background-color: #fff; 
display:none;
}

.togglebutn {
color: #900;
background-color: #FFF; 
}

</style>

</head>

<body>

<div id="section1">
<div class="toppara"><p>Content 1.</p> 

</div>

<div class="morepara">
<p>
Content 2. 
</p>

</div>

<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 1 -->

<!-- section 2 -->
<div id="section2">
<div class="toppara"><p>Content 3.</p> 
</div>


<div class="morepara">
<p>
Content 4.
</p>


</div>

<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 2 -->

<script language="javascript" type="text/javascript">
$(function() {
    $('.togglebutn a').click(               
        function(){ 
        var $parentpara = $(this).parent().prev();

        $parentpara.toggle('slow');
    });

});


</script>

هل كانت مفيدة؟

المحلول

بالنسبة للانزلاق إلى العمل، يجب على JQuery تخمين الارتفاع النهائي للعنصر. عندما يحصل على هذا الخطأ، فإنك ترى قفزة عند انتهاء الرسوم المتحركة ويتم السماح للعنصر بإيجاد ارتفاعه الطبيعي.

مشكلتك ناجمة عن الهوامش على p علامة التي تستغرق مساحة في تقدير JQuery الأصلي، ولكنها تنهار عند اكتمال الرسوم المتحركة.

الحل إما إزالة الهوامش على p العلامات، في محاولة لمنع الانهيار من الحدوث عن طريق إعطاء .PRAMEPARA DIV ارتفاع صريح، حدود أو بعض الحشو أعلى / أسفل، على الرغم من أن كلا الخيارين لها آثار جانبية غير مرغوب فيها.

نصائح أخرى

يمكنك استخدام .children('p') من أجل الوصولu003Cp style=";text-align:right;direction:rtl"> من عندu003Cdiv style=";text-align:right;direction:rtl"> ، لكنني أقترح عليك تجربة .slideToggle('slow') طريقة بدلا من .toggle, لا تزال تطبيقها علىu003Cdiv style=";text-align:right;direction:rtl"> عنصر. بشكل عام، يناسب جيدا عن نوع الشيء الذي تتوقعه.

لست متأكدا ما يسبب الرثث. تخميني هو تأثير ناتج عن تركيب الفقرة في DIV عند تغيير سمة Div's Disploy من "بلا" إلى "كتلة". لقد طلبت اقتراح Stanch وتوصل إلى مثال عمل يبدو أنه يعمل بشكل أفضل قليلا.

<html>
<head>
<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9; 
}
.morepara {
background-color: #fff; 
}

.togglebutn {
color: #900;
background-color: #FFF; 
}

</style>

</head>

<body>
    <div id="section1">
        <div class="toppara">
            <p>Content 1.</p> 
        </div>
        <div class="morepara">
            <p>
            Content 2. 
            </p>
        </div>
        <p class="togglebutn">
            <a>Show/Hide</a>
        </p>
    </div>

    <div id="section2">
        <div class="toppara">
            <p>Content 3.</p> 
        </div>
        <div class="morepara">
            <p>
            Content 4.
            </p>
        </div>
        <p class="togglebutn">
            <a>Show/Hide</a>
        </p>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$('document').ready( function (){
    $('.morepara p').hide();
    $('.togglebutn a').click(
        function(){
            var parentpara = $(this).parent().prev().children();
            parentpara.toggle('normal');
        }
    );
});
</script>
</body>
</html>

لست متأكدا مما إذا كان لديك إجابة على هذا بعد ولكن إعطاء الحف التي يتم تبديلها عرضا محددا يعمل بالفعل بالنسبة لي. فحص في FF & IE 7-8

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top