Current class - mouseenter jQuery Animation

Question

My brain just stuck its 4:40 AM and I don't know what to do. Either I don't have solution in my head or I should sleep.

However I don't know how to animate only currently selected/hovered class and not all of them.

Here's the HTML part:

        <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>

Here's the jQuery part:

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

It works pretty fine... It reduces and increase opacity on hover of the parent. However, why it animates all of them if I have for example 3x same html structure and not only currently hovered one ?

score 2 · Accepted Answer · answered Jan 31 '13 at 03:48

2

Change your script to this. You need to limit the scope to the hovered element's child.

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

answered Jan 31 '13 at 03:48

Sang Suantak

5,213
1
27
46

+1 oh yes thank you man. Time for bed. Just to Check as Correct answer before I go to sleep <3 – dvlden Jan 31 '13 at 03:50

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

@jSang has the right idea, but I think this can even be simplified by using hover and fadeTo instead.

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

DEMO

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 31 '13 at 03:49

Chris Barr

29,851
23
95
135

I'll check this one tomorrow. Thank you for kind post Chris. +1 – dvlden Jan 31 '13 at 03:58

Current class - mouseenter jQuery Animation

2 Answers2

DEMO