如何实现鼠标移出文本后jQuery文本动画可继续执行？

核心修改逻辑 #

• jQuery的hover()方法支持两个回调参数，第一个为鼠标移入触发，第二个为鼠标移出触发，原代码仅实现了移入暂停逻辑，缺失移出恢复动画的逻辑
• 重新触发动画时不需要额外计算元素当前状态，jQuery会自动以元素当前的实时样式为起点，向目标属性值过渡，效果连贯自然

修正后的完整jQuery代码 #

$(document).ready(function () {
    // 封装公共动画逻辑，复用性更高
    function runParAnimation() {
        $("#par").animate({
            fontSize: "40px",
            left : "952px",
        }, 3000);
    }

    $("#start").click(function() {
        // 点击前先停止已有动画，避免多次点击导致动画队列累积
        $("#par").stop();
        runParAnimation();
    });

    $("#par").hover(
        // 鼠标移入：暂停动画
        function(){
            $(this).stop();
        },
        // 鼠标移出：从当前位置继续执行动画
        function(){
            runParAnimation();
        }
    );
});

额外优化说明 #

• 公共动画函数封装后，后续修改动画参数仅需要调整一处即可，维护成本更低
• 开始按钮新增前置stop()逻辑，避免用户多次点击按钮导致动画重复叠加
• 如果对动画时长精度要求极高，可以额外补充逻辑记录动画已执行时长，移出时按剩余时长执行动画，普通场景下上述简化方案已经足够流畅

内容的提问来源于stack exchange，提问作者data data