jQuery SwitchClass

Question

هل من الممكن التراجع switchClass انتقال؟

أريد عنصرًا للحصول ببطء على الفصل A بينما تحوم فوقه ، وتفقده ببطء مرة أخرى بمجرد أن يتحرك الماوس بعيدًا. ومع ذلك ، يبدو أن الوظيفة رائعة ، والاتصال .stop(0,1) لا يبدو أن يساعد. في الواقع ، يبدو أن يكسرها.

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

هل هذا الانتقال ممكن؟

تعديل:

هذا هو الرمز الذي أستخدمه:

$('#navbar li:not(.current) a').hover(function() {
    $(this).parent()
        .stop(1,0)
        .addClass('current', 1000);
}, function () {
    $(this).parent()
        .stop(1,0)
        .removeClass('current', 1000);
});

هل ربما لأن تغيير فئة li لا ينتج عن أسلوب نقل أطفالها؟

EDIT2:

نعم ، هذا "إصلاحه". يمكن الآن ملاحظة الأخطاء الحقيقية بكل مجدها (يتم تجميدها في حالة وسيطة).

Answer 1

هذا هو الأقرب الذي جئت لجعله يعمل:

مثال: http://jsfiddle.net/turvp/

قد يكون هناك بعض المبالغة ، وقد تتمكن من استخدام :animated المحدد ، على الرغم من أنني واجهت مشاكل في البداية.

قد لا تستحق الجهد ...

لغة البرمجة

<div id='myElement' class='blue'>content</div>

CSS

div {
    width: 100px;
    height: 100px;
}

.blue {
    background: blue;
    position:relative;
    left: 20px;
}
.myClass {
    background:red;
    margin-top: 50px;
}

jQuery

var animating = false;
var interval;
$('#myElement').hover(
    function() {
        var $th = $(this);
        if(!animating && !interval) {
            $th.clearQueue();
            animating = true;
            $th.addClass('myClass',500,function() {animating=false;});
        }
    },
    function() {
            var $th = $(this);
            if(interval) return false;
            if(animating) {
                interval = setInterval(function() {
                                            if(!animating) {
                                                $th.clearQueue();
                                                animating = true;
                                                $th.removeClass('myClass',500, function(){animating = false;});
                                                clearInterval(interval);
                                                interval = null;
                                            }},50)
            } else {
                $th.clearQueue();
                $th.removeClass('myClass',500, function(){animating = false;});
            }
        }
);

Answer 2

يبدو أنك تبحث عن شكل من أشكال الوظيفة.

$('#clickme').hover(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); });

وإلا فإن تبديل الفصل ببطء لا يكون له معنى كبير بالنسبة لي

Answer 3

ليس من المنطقي الحصول على فصل ببطء. يحتوي العنصر إما على فئة معينة أو لا ، ولا يوفر CSS أي طريقة للإشارة إلى نوع من "التضمين الجزئي" في الفصل.

تعديل - يشير Patrick إلى أن jQuery UI يدعم ذلك بالفعل ، على الأقل إلى حد ما. تستغرق وظائف الطبقة المنطقية وسيطة مدة إذا قمت بتثبيت الأشياء.