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>

它工作得很好......它减少并增加了父级悬停时的不透明度。但是，如果我有例如 3x 相同的 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 回答