Question

我正在尝试提高此代码的效率，因此我无需复制它。我有3个带标记的方框：

<div class="feature purple">
</div>

<div class="feature red">
</div>

<div class="feature blue">
</div>

我正在动画他们的内容，我已经通过以下方式省略了垃圾邮件：

$(function(){ 
    $('.purple').hover(function() {

        $('.purple .icon').animate(
            { left: 220, opacity: 0.5 }, {
                duration: 'slow',
                easing: 'easeInOutQuart'
        });

        $('.purple .the-title').animate(
            { left: 15 }, {
                duration: 'slow',
                easing: 'easeInOutQuart'
        });

    });   
    $('.purple').mouseleave(function() {

        $('.purple .the-title').animate(
            { left: 75 }, {
            duration: 'slow',
            easing: 'easeInOutQuart'

        });
        $('.purple .icon').animate(
            { left: 5, opacity: 1 }, {
            duration: 'slow',
            easing: 'easeInOutQuart'
        });
    });              
});

如何在没有其他2个框动画的情况下将jQuery附加到'.feature'，并降低我必须使用的jQuery行数？

提前致谢。

Answer 1

这样的事应该可以正常工作。确保在第一个绑定中使用mouseover而不是hover。

$(function(){ 
    $('.feature').mouseover(function() {

        $(this).find('.icon').stop().animate(
            { left: 220, opacity: 0.5 }, {
                duration: 'slow',
                easing: 'easeInOutQuart'
        });

        $(this).find('.the-title').stop().animate(
            { left: 15 }, {
                duration: 'slow',
                easing: 'easeInOutQuart'
        });

    }).mouseleave(function() {

        $(this).find('.the-title').stop().animate(
            { left: 75 }, {
            duration: 'slow',
            easing: 'easeInOutQuart'

        });
        $(this).find('.icon').stop().animate(
            { left: 5, opacity: 1 }, {
            duration: 'slow',
            easing: 'easeInOutQuart'
        });
    });              
});

jQuery .animate（）更高效

1 个答案: