0

私の脳はちょうど午前 4 時 40 分に止まってしまい、どうすればよいかわかりません。頭の中に解決策がないか、眠る必要があります。

ただし、現在選択されている/ホバーされているクラスのみをアニメーション化する方法がわかりません。

HTML部分は次のとおりです。

        <div class="cardWrap">
            <div class="backlit"></div>

            <div class="cardStyle">
                <div class="cardOverlay"></div>
                <ul class="cardAmount">
                    <li>Role Gift</li>
                    <li>Download and Play <br> Your Favourite Games</li>
                    <li>$10</li>
                    <li> </li>
                </ul>
            </div>

            <a class="cardSelect">Get this amount</a>
        </div>

jQueryの部分は次のとおりです。

<script>
    $(function() {
        $('.cardWrap').on('mouseenter mouseleave', function(e) {
            if(e.type === 'mouseenter') {
                $('.backlit').stop().animate({'opacity': '.9'})
            } else {
                $('.backlit').stop().animate({'opacity': '.4'})
            }
        });
    });
</script>

それはかなりうまく機能します...親のホバー時に不透明度を減らしたり増やしたりします。ただし、たとえば 3 つの同じ html 構造があり、現在ホバーされているだけでなく、それらすべてをアニメーション化するのはなぜですか?

4

2 に答える 2

2

スクリプトをこれに変更します。ホバーされた要素の子にスコープを制限する必要があります。

$(function () {
    $('.cardWrap').on('mouseenter mouseleave', function (e) {
        if (e.type === 'mouseenter') {
            $(this).children('.backlit').stop().animate({
                'opacity': '.9'
            })
        } else {
            $(this).children('.backlit').stop().animate({
                'opacity': '.4'
            })
        }
    });
});
于 2013-01-31T03:48:39.770 に答える
1

@jSang は正しい考えを持っていますが、代わりにhoverとfadeToを使用することでこれを単純化することもできると思います。

$('.cardWrap').hover(function() {
    $(this).children('.backlit').stop().fadeTo(300, '.9');
}, function(){
    $(this).children('.backlit').stop().fadeTo(300, '.4');
});

デモ

于 2013-01-31T03:49:45.683 に答える