jquery - jQuery .animate() 更高效

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'
        });
    });              
});

如何在.feature没有其他 2 个框的情况下将 jQuery 附加到“”，并减少我必须使用的 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'
        });
    });              
});