Question

我在使用jQuery时遇到一些问题。我的代码运行正常，但是我想在这两个函数上添加一些延迟（淡入等）。

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

我尝试过

$(".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);

但是由于某种原因，这是行不通的。我不知道为什么因此，在这里必须添加类时，我需要淡入/延迟/“处理时间”，并且我已经尝试使用.fadeIn("slow")

第二个问题是，我的模板中有foreach表，当鼠标悬停在表上时（请参见jQuery函数），它将打开我编写的每个类（rade-test-div2和rade-test2）），当我添加.first（）时，它只是first ofc。如何只打开桌子在哪里？ product-item类位于表的TR元素中，因此我可以添加类似的内容

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

但是如何编写jQuery以选择$ uniqueId？我的jQuery代码在另一个文件中。

Answer 1

要制作动画，请使用CSS“过渡”属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions。然后，当将CSS类添加到元素时，将触发动画。
要操作活动元素，请使用“ this”，例如：

$(".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);

示例：https://jsfiddle.net/8vjmhztr/2/

jQuery延迟并获取php变量

1 个答案: