jquery淡入淡出时防止用户过度操作

最新推荐文章于 2025-04-09 14:23:08 发布

左手__右手

最新推荐文章于 2025-04-09 14:23:08 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hzm_520/article/details/31993991

本文详细介绍了如何通过使用一个布尔变量限制用户操作来解决jQuery图片切换特效中出现的两张图片同时淡入或淡出的问题。通过实现一个简单的逻辑判断，确保了图片切换的流畅性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学Jquery，做了一个渣渣的特效，就是淡入淡出自动切换图片，发现当不停点击切换图片的时候，会出现两张图片同时在淡入或者同时在淡出，原因是上一张图片还没淡入（淡出）完，另一张图片就要淡入（淡出），即用户操作过快。

我是这样解决的，使用一个boolean值来限制用户的操作。

function next() {
    if(isNext) {
        isNext = false;
        var k = num;
        if(k == 3) {
            k = 0;
        } else {
            k++;
        }
        $("#img" + num).fadeOut("slow");
        $("#img" + k).fadeIn("slow", isTrue);
        $("#img" + num).css("display", "none");
        $("#page" + num).css("backgroundColor", "gray");
        $("#img" + k).css("display", "inline");
        $("#page" + k).css("backgroundColor", "red");

        if(num == 3) {
            num = 0;
        } else {
            num++;
        }
    }
}


function isTrue() {
    isNext = true;
}