javascript - 在页面加载时为对象设置动画，但仍然可以通过悬停进行更改

Question

假设我在三个盒子上有一个小悬停功能。当我将鼠标悬停在一个上时，它会设置动画并更改背景颜色。当页面加载时，我想要一个已经动画的。如果我将鼠标悬停在另一个框上，它会消失，然后只为悬停的任何一个设置动画。

这是JSFiddle

jQuery：

$(document).ready(function(){

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

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

Answer 1

你可以试试这个

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

演示。

Answer 2

使用自定义类：

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

实际上我更喜欢这样，因为它只触发一次，但差异可能可以忽略不计。您也可以将函数从 first 的末尾取出animate，并在调用函数之前粘贴该行animate。我的猜测是我建议的方式看起来最流畅。但是，所有方法都会奏效。