Javascript 在jquery动画期间，div闪烁

我想这样做：有两个div并排。当我将鼠标悬停在第一个div上时，它的宽度变为55%，另一个div的宽度变为45%，而另一个div也会发生同样的情况

我的问题是，div在动画期间闪烁

我在chrome上试过这个，当窗口完全最大化时效果很好，但当我调整窗口大小时，闪烁再次开始

请有人帮我一下

我的代码：

$（文档）.ready（函数（）{
$（“#左”）.hover（函数（）{
$（“#左”）。动画（{宽度：“55%”，50）；
$（“#右”）。动画（{宽度：“45%”，50）；
}，函数（）{
$（“#左”）。设置动画（{宽度：“50%”，50）；
$（“#右”）。动画（{宽度：“50%”，50）；
})
})
$（文档）.ready（函数（）{
$（“#右”）.hover（函数（）{
$（“#右”）。动画（{宽度：“55%”，50）；
$（“#左”）。动画（{宽度：“45%”，50）；
}，函数（）{
$（“#右”）。动画（{宽度：“50%”，50）；
$（“#左”）。设置动画（{宽度：“50%”，50）；
})
})

#包装器{
宽度：100%；
溢出：隐藏；
空白：nowrap；
身高：683px；
}
#左，#右{
显示：块；
宽度：50%；
浮动：左；
身高：100%；
}
#左{
背景：蓝色；
}
#对{
背景：绿色；
}

左边
正确的

更新： 增加了动画时间

这就是你的JS的问题， 当JS动画发生并且光标移动时，动画再次开始发生

所以你要做的就是使用

这是更新后的代码

    $(document).ready(function(){
    $("#left").hover(function(){
            $("#left").stop().animate({width:"55%"},150);
            $("#right").stop().animate({width:"45%"},150);
        },function(){
            $("#left").stop().animate({width:"50%"},150);
            $("#right").stop().animate({width:"50%"},150);
    })
})

$(document).ready(function(){
    $("#right").hover(function(){
        $("#right").stop().animate({width:"55%"},150);
        $("#left").stop().animate({width:"45%"},150);
    },function(){
        $("#right").stop().animate({width:"50%"},150);
        $("#left").stop().animate({width:"50%"},150);
    })
})

下面是更新后的代码fiddle 更新： 增加了动画时间

这就是你的JS的问题， 当JS动画发生并且光标移动时，动画再次开始发生

所以你要做的就是使用

这是更新后的代码

    $(document).ready(function(){
    $("#left").hover(function(){
            $("#left").stop().animate({width:"55%"},150);
            $("#right").stop().animate({width:"45%"},150);
        },function(){
            $("#left").stop().animate({width:"50%"},150);
            $("#right").stop().animate({width:"50%"},150);
    })
})

$(document).ready(function(){
    $("#right").hover(function(){
        $("#right").stop().animate({width:"55%"},150);
        $("#left").stop().animate({width:"45%"},150);
    },function(){
        $("#right").stop().animate({width:"50%"},150);
        $("#left").stop().animate({width:"50%"},150);
    })
})

下面是更新后的代码fiddle

---

我认为这是一个并发问题。。因为第二个div动画比第一个稍晚一点开始

我更改了css和动画，如下所示：

仅设置左div的动画

将第二个div的背景设置为包装器

不要将宽度设置为第二个div，因为您不需要它

CSS:

JS:

---

我认为这是一个并发问题。。因为第二个div动画比第一个稍晚一点开始

我更改了css和动画，如下所示：

仅设置左div的动画

将第二个div的背景设置为包装器

不要将宽度设置为第二个div，因为您不需要它

CSS:

JS:

如何使用：

我将其设置为0.5s，这样更容易看到，您当然可以将其更改为0.05s

在jQuery中：

$(document).ready(function(){
    $("#left").hover(function () {
        $("#left").css({width: "55%"});
        $("#right").css({width: "45%"});
    }, function () {
        $("#left").css({width: "50%"});
        $("#right").css({width: "50%"});
    });

    $("#right").hover(function () {
        $("#right").css({width: "55%"});
        $("#left").css({width: "45%"});
    }, function () {
        $("#right").css({width: "50%"});
        $("#left").css({width: "50%"});
    });
});

如何使用：

我将其设置为0.5s，这样更容易看到，您当然可以将其更改为0.05s

在jQuery中：

$(document).ready(function(){
    $("#left").hover(function () {
        $("#left").css({width: "55%"});
        $("#right").css({width: "45%"});
    }, function () {
        $("#left").css({width: "50%"});
        $("#right").css({width: "50%"});
    });

    $("#right").hover(function () {
        $("#right").css({width: "55%"});
        $("#left").css({width: "45%"});
    }, function () {
        $("#right").css({width: "50%"});
        $("#left").css({width: "50%"});
    });
});

---

我个人会为不同的大小使用CSS转换和属性类。您可以最小化浏览器重绘，从而获得更好的性能

var leftDiv=document.getElementById（'left'），
rightDiv=document.getElementById（'right'）；
$（文档）.ready（函数（）{
$（leftDiv）.on（'mouseover'，function（）{
$（rightDiv）.addClass（'expand-small'）；
$（leftDiv）.addClass（'extract-small'）；
});
$（leftDiv）.on（'mouseout'，function（）{
$（rightDiv）.removeClass（'expand-small'）；
$（leftDiv）.removeClass（'extract-small'）；
});
});
html，正文{
保证金：0；
填充：0；
}
#包装纸{
宽度：100%；
溢出：隐藏；
空白：nowrap；
身高：683px；
}
.content\u左、.content\u右{
显示：块；
宽度：50%；
浮动：左；
身高：100%；
-webkit过渡：宽50ms，易于安装；
-moz过渡：宽度为50ms；
-o型过渡：宽50ms，易于安装；
过渡段：宽度为50ms；
}
.扩大规模{
宽度：55%；
}
.提取少量{
宽度：45%；
}
#左{
背景：蓝色；
}
#对{
背景：绿色；
}

左边
正确的
我个人会为不同的大小使用CSS转换和属性类。您可以最小化浏览器重绘，从而获得更好的性能


var leftDiv=document.getElementById（'left'），
rightDiv=document.getElementById（'right'）；
$（文档）.ready（函数（）{
$（leftDiv）.on（'mouseover'，function（）{
$（rightDiv）.addClass（'expand-small'）；
$（leftDiv）.addClass（'extract-small'）；
});
$（leftDiv）.on（'mouseout'，function（）{
$（rightDiv）.removeClass（'expand-small'）；
$（leftDiv）.removeClass（'extract-small'）；
});
});
html，正文{
保证金：0；
填充：0；
}
#包装纸{
宽度：100%；
溢出：隐藏；
空白：nowrap；
身高：683px；
}
.content\u左、.content\u右{
显示：块；
宽度：50%；
浮动：左；
身高：100%；
-webkit过渡：宽50ms，易于安装；
-moz过渡：宽度为50ms；
-o型过渡：宽50ms，易于安装；
过渡段：宽度为50ms；
}
.扩大规模{
宽度：55%；
}
.提取少量{
宽度：45%；
}
#左{
背景：蓝色；
}
#对{
背景：绿色；
}

左边
正确的
为什么document.ready使用了两次？？为什么document.ready使用了两次？？
$(document).ready(function(){
    $("#left").hover(function () {
        $("#left").css({width: "55%"});
        $("#right").css({width: "45%"});
    }, function () {
        $("#left").css({width: "50%"});
        $("#right").css({width: "50%"});
    });

    $("#right").hover(function () {
        $("#right").css({width: "55%"});
        $("#left").css({width: "45%"});
    }, function () {
        $("#right").css({width: "50%"});
        $("#left").css({width: "50%"});
    });
});