DEMO

Question

我的大脑刚刚停留在凌晨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>

它工作得很好......它会减少并增加父母悬停时的不透明度。但是，如果我有例如3x相同的html结构并且目前只有一个html结构，为什么它会动画所有这些？

Answer 1

将脚本更改为此。您需要将范围限制为悬停元素的孩子。

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

Answer 2

@jSang有正确的想法，但我认为通过使用hover和fadeTo可以简化这一点。

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

当前类 - mouseenter jQuery动画

2 个答案:

DEMO