嘿，我来帮你搞定这个需求！首先先修正原代码里的一个小错误——你定义slideContainer的时候少了$符号，应该把它存成jQuery对象，不然后面调用css和animate方法会报错。

接下来，要实现仅在动画执行期间禁用按钮，我们可以利用jQuery animate方法的回调函数，同时加上动画状态判断来防止重复点击，具体方案如下：

方案说明 #

• 在点击按钮时，先判断滑块容器是否正在执行动画，如果是则直接返回，避免重复触发
• 动画开始时禁用按钮（通过disabled属性控制）
• 动画完成后重新启用按钮

修改后的完整代码 #

// 修正变量定义，存为jQuery对象
var $slideContainer = $('#slider');
var width = 720;
var $slideBtn = $('.button'); // 提前获取按钮的jQuery对象，方便后续操作

function slide() {
    // 判断容器是否正在动画，或者按钮已禁用，直接返回
    if ($slideContainer.is(':animated') || $slideBtn.prop('disabled')) {
        return;
    }

    // 禁用按钮
    $slideBtn.prop('disabled', true);

    // 执行动画，在complete回调中重新启用按钮
    if (parseInt($slideContainer.css('marginLeft')) >= -2160) {
        $slideContainer.animate(
            {'margin-left': '-=' + width},
            200,
            function() {
                // 动画完成后启用按钮
                $slideBtn.prop('disabled', false);
            }
        );
    } else {
        // 如果已经滑到最右侧，不需要执行动画，直接启用按钮
        $slideBtn.prop('disabled', false);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='button' onclick='slide()'>滑动</a>

额外视觉优化建议 #

为了让用户直观感受到按钮禁用状态，可以加一点CSS样式：

.button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

这样用户在动画执行期间不仅无法点击按钮，还能通过视觉效果清楚知道按钮暂时不可用。

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