Javascript 在页面加载时设置对象动画，但仍可以使用鼠标悬停进行更改

假设我在三个盒子上有一个小的悬停函数。当我将鼠标悬停在一个上方时，它会设置动画并更改背景色。加载页面时，我希望其中一个页面已设置动画。如果我将鼠标悬停在另一个框上，它将消失，然后只对悬停的框设置动画

这是你的电话号码

jQuery：

$(document).ready(function(){

    $('.box').hover(function(){
        $(this).stop().animate({
            backgroundColor: "red"
        }, 800);
    },
    function(){
        $(this).stop().animate({
            backgroundColor: "green"
        }, 800);
    });
});

现在，如何在页面加载时设置中间框的动画。然后允许悬停正常工作（包括中间框动画恢复正常）。

使用自定义类：

$(document).ready(function(){

     $('.box').hover(
    function(){

        $(this).stop().animate({
            backgroundColor: "red"
        }, 800,function(){
             $('.box').removeClass('.animated');
        })
    },
    function(){
        $(this).stop().animate({
            backgroundColor: "green"
        }, 800);

    });

})

CSS：

 .animated { background:red;}

您可以尝试将

removeClass

放在哪里。最好添加如下函数：

$('.box').one('mouseover',function(e){
   $('.box').removeClass('.animated');
})

实际上我更喜欢它，因为它只发射一次，但差异可能可以忽略不计。您还可以将函数从第一个

动画

的末尾取下，并在调用

动画

函数之前粘贴该行。我猜我建议的方式是最光滑的。但是，所有的方法都会奏效。

你可以试试这个

$(document).ready(function(){
    $('.box').eq(1).animate({
        backgroundColor: "red"
    }, 800);
    $('.box').hover(function(){
        $('.box').stop().animate({
            backgroundColor: "green"
        }, 800);
        $(this).stop().animate({
            backgroundColor: "red"
        }, 800);
    },
    function(){
        $(this).stop().animate({
            backgroundColor: "green"
        }, 800);
    });
});

---

中间的方框应该保持在“红色”还是转到“红色”再回到“绿色”？