jQuery延迟并获取php变量

Question

I have some problems with jQuery. I have code that is running ok, but I want to add some delay (fade in, etc...) on this both functions.

$(document).ready(function(){
    $(".product-item, .rade-test").mouseover(function(){
        $('.just-to-define').removeClass('rade-test-div');
        $('.just-to-define').addClass('rade-test-div2');
        $('.heredefine').removeClass('rade-test');
        $('.heredefine').addClass('rade-test2');
    });
    $( ".product-item, .rade-test" ).mouseout(function() {
        $('.just-to-define').addClass('rade-test-div');
        $('.just-to-define').removeClass('rade-test-div2');
        $('.heredefine').addClass('rade-test');
        $('.heredefine').removeClass('rade-test2');
    });
});

I tried with

$(".product-item, .rade-test").mouseover(function(){
        $('.just-to-define').removeClass('rade-test-div');
        $('.just-to-define').addClass('rade-test-div2');
        $('.heredefine').removeClass('rade-test');
        $('.heredefine').addClass('rade-test2');
    }, 2000);

but that's not working from some reason. I don't know why. So here when it have to add class i need fade in/delay/'process time', and i already tried with .fadeIn("slow")

Second what I have problem with this is, I have table foreached in my template, and when mouse is over table (see in jQuery function) it's opening every class that i have write (rade-test-div2 and rade-test2), and when I add .first() it's only first ofc. How can I open only table where is my mouse? product-item class is in TR element of table, so I can add something like

@php $uniqueId = uniqId(); @endphp
<tr class="product-item {{$uniqueId}}">

But how to write in jQuery to select this $uniqueId? My jQuery code is in another file.

Answer 1

1. To make an animation, use a CSS "transition" property: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions. Then, when a CSS class will be added to an element, the animation will be triggered.
2. To manipulate the active element use "this", e.g.:

$(".product-item, .rade-test").mouseover(function(){
    var $this = $(this);

    $this.find('.just-to-define').removeClass('rade-test-div');
    $this.find('.just-to-define').addClass('rade-test-div2');
    $this.find('.heredefine').removeClass('rade-test');
    $this.find('.heredefine').addClass('rade-test2');
}, 2000);

Example: https://jsfiddle.net/8vjmhztr/2/

</div>