0

このコードをより効率的にしようとしているので、複製する必要はありません。マークアップされたボックスが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の行数を減らすにはどうすればよいですか？

前もって感謝します。

4

1 に答える 1

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'
        });
    });              
});
于 2012-08-20T13:53:18.710 に答える