Question

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

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

DEMO.

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

我实际上更喜欢这样，因为它只发射一次，但差别可能微不足道。您也可以在第一个animate的末尾使用该函数，并在调用animate函数之前粘贴该行。我的猜测是我建议的方式是最平滑的。但是，所有方法都可行。

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

2 个答案: