Question

我希望一旦加载到初始大小就逐个放大所有气泡。

我想在所有气泡加载效果后自动显示悬停效果。

我尝试过的代码是

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

应用所有处理程序后。

Demo

Answer 2

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

用Jquery效果排序泡泡

2 个答案: