jquery addclass/removeclass لا يعمل دائمًا عند ضبط "السرعة" (أحداث الماوس)

Question

في فئة CSS "employee_mouseover" أجعل لون bg باللون الأحمر.

        $(".employee").bind("mouseenter", function() {
            $(this).addClass("employee_mouseover");
        });
        $(".employee").bind("mouseleave", function() {
            $(this).removeClass("employee_mouseover");
        });

هذا يعمل بشكل جيد.

ولكن، عندما أقوم بتعيين سرعة لجعله يبدو أكثر جمالاً، يظل العنصر باللون الأحمر عندما أقوم بسرعة بإدخال الماوس + مغادرة الماوس؛

    $(".employee").bind("mouseenter", function() {
        $(this).addClass("employee_mouseover", "fast");
    });
    $(".employee").bind("mouseleave", function() {
        $(this).removeClass("employee_mouseover", "fast");
    });

هذا لا يعمل بشكل جيد، إلا إذا قمت بالدخول والخروج من العنصر ببطء شديد.

هل هناك طريقة أفضل للقيام بذلك؟

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

Answer 1

ويمكن القيام به، ولكن تحتاج إلى تثبيت مسج coloranimate المساعد . ثم يمكنك استخدام التعليمات البرمجية أدناه لتغيير لون ببطء:

$(".employee").bind("mouseenter", function() {
  $(this).animate({backgroundColor: "#bbccff"}, "slow");

});
$(".employee").bind("mouseleave", function() {
  $(this).animate({backgroundColor: "white"}, "slow");
});

Answer 2

مستندات مسج UI :

<اقتباس فقرة>   

وومسج UI الآثار الأساسية يمتد API الفئة الأساسية لتكون قادرة على تحريك بين فئتين مختلفتين. يتم تغيير الطرق التالية. انهم يقبلون الآن ثلاث معلمات إضافية: السرعة، تخفيف (اختياري)، والاستدعاء.

وهكذاThomas يجب أن تشمل كلا من المكتبات مسج ومسج UI على صفحته، وتمكين المعلمات السرعة والاستدعاء إلى addClass وremoveClass.

Answer 3

وأنت استخدام الحدث الخطأ. تريد:

$(".employee").hover(function() {
 $(this).addClass("employee_mouseover");
}, function() {
 $(this).removeClass("employee_mouseover");
});

وليس هناك حجة السرعة على إضافة أو إزالة الطبقة.

Answer 4

نعم، وذلك في CSS!

.employee:hover{background:pink;}

وأيضا، ليس هناك سرعة parameted لaddClass و سرعة موجود فقط للآثار.

Answer 5

وهناك معلمة مدة لremoveClass (http://docs.jquery.com/UI/Effects/removeClass)، لكنه لا يعمل في FF. هل هناك أي شيء خطأ في قانون بلدي؟ أنا جديدة على مسج. وانا ذاهب الى محاولة تحريك ظيفة الآن.

ما أحاول أن أفعله هنا هو استخدام المراسي ومن ثم تسليط الضوء على مرساة موقع الوجهة عند النقر على مرساة. وهنا قال لي كود HTML -

<ul>
                <li><a href="#caricatures">Caricatures</a></li>
                <li><a href="#sketches">Sketches</a></li>
</ul>

وبلدي مرساة الوجهة -

<a href="#" id="caricatures"><h3>Caricatures</h3></a>

وهذا هو المكان الذي قد لون الخلفية للتغيير.

إليك بلدي CSS -

<style>
            .spotlight{
                background-color:#fe5;
            }
</style>

إليك قانون بلدي مسج -

<script>
    $('a[href$="caricatures"]').click(function(){
        $('a[id="caricatures"] h3').addClass("spotlight");
        $('a[id="caricatures"] h3').removeClass("spotlight",1000);
    });
    </script>

Answer 6

وaddClass هو لإضافة فئات CSS لعناصر. إذا كنت تبحث لتغيير بعض الممتلكات CSS كتبها tweening ومن ثم تحتاج إلى القيام بذلك بشكل صريح باستخدام تأثيرات .

والتعليمات البرمجية الخاصة بك:

$(this).addClass("employee_mouseover", "fast");

وستضيف فئتين، employee_mouseover وfast إلى this، التي من الواضح ليس ما كنت بعد.

Answer 7

وهنا قال لي الانتقال مع مسج:

$("#layoutControl .actionList").click(
    function(){
        $("#assetsContainer").fadeOut("fast",function(){
            $(this).removeClass("assetsGrid").addClass("assetsList");
            $("#iconList").attr("src", "/img/bam/listIcon.png");
            $("#iconGrid").attr("src", "/img/bam/gridIconDim.png");
            $(this).fadeIn("fast");
        });
    }
);

Answer 8

وحتى إذا قمت بتضمين JqueryUI بشكل صحيح، هذه كلها تظهر أن تفشل خارج FF عند استخدام "مدة" معلمة. يسبب أخطاء JS في IE. وأود أن عصا لتحريك () التي تمتص.

http://jqueryui.com/docs/addClass/

http://jqueryui.com/docs/removeClass/

http://jqueryui.com/docs/switchClass/

http://jqueryui.com/docs/toggleClass/

وليس هناك علما بذلك في مستندات على موقع jqueryui.

Answer 9

$(".employee").hover(function() {
    $(this).stop().animate({ backgroundColor: "#bbccff" }, "slow");
}, function() {
    $(this).stop().animate({ backgroundColor: "white" }, "slow");
});

Answer 10

ويمكنك استخدام التحولات CSS3 لتحقيق هذا الغرض.

a:hover {
    color: red;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

a:link, a:visited {
    color: white;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

Answer 11

أيضًا، لا توجد سرعة محددة لـ addClass، السرعة موجودة فقط للتأثيرات.

صحيح.

ولكن ربما قد يساعد هذا البرنامج المساعد:

الرسوم المتحركة إلى الدرجة