jquery - 使用 Jquery 效果整理气泡

Question

一旦加载到初始大小，我想一一放大所有气泡。

我的 JS 小提琴是：http: //jsfiddle.net/ASPZm/

一旦所有气泡都加载了效果，我想自动显示悬停效果。

我尝试过的代码是

$(document).ready(function () {
var i = 20;
$('.box').animate({
    width: '30px',
    opacity: '1',
    height: '30px',
    marginLeft: '-15px',
    marginTop: '-15px'
}, 2000);

$('.box').each(function (i) {
    setTimeout(function () {
        $(this).stop(true, false).animate({
            width: '200px',
            height: '200px',
            marginLeft: '-105px',
            marginTop: '-105px',
            fontSize: '40px',
            opacity: '1',
        }, 200).addClass('sachin').find("strong").css("display", "block");
        $(this).stop(true, false).animate({
            width: '30px',
            height: '30px',
            marginLeft: '-15px',
            marginTop: '-15px',
            fontSize: '20px',
        }, 300).removeClass('sachin').find("strong").css("display", "none");
    }, 400 * i);
});

$('.box').hover(function () {
    $(this).stop(true, false).animate({
        width: '200px',
        height: '200px',
        marginLeft: '-105px',
        marginTop: '-105px',
        fontSize: '40px',
        opacity: '1',
    }, 300).addClass('sachin').find("strong").css("display", "block");
}, function () {
    $(this).stop(true, false).animate({
        width: '30px',
        height: '30px',
        marginLeft: '-15px',
        marginTop: '-15px',
        fontSize: '20px',
    }, 300).removeClass('sachin').find("strong").css("display", "none");
});
});

Answer 1

mouseover您可以通过调用手动触发事件：

$(".box").trigger("mouseover");

在应用所有处理程序之后。

演示

Answer 2

.animate() 有一个回调函数，在动画完成后执行。您可以将所有悬停功能拉到一个单独的函数中，然后您可以在 .animate() 回调中调用新函数。