0

我的网页中有两个 div，这是用户可以选择的两个可能选项。我用css（背景图像）设置每个div背景。图像是在网站加载时预加载的。有两种可能的状态，当一个选项被选中时，xxx_image_enabled.png 被设置为背景图片，当该选项未被选中时，xxx_image_disabled.png 被设置为背景图片。在某些浏览器（Chrome）中，它会闪烁一点。我用 jQuery 设置了 background-image 属性。

CSS看起来像这样：

.option-div{
     width: 70px;
     height: 70px;
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     margin: 0 auto;
}

知道是什么原因导致闪烁吗？刷新后消失。

4

2 回答 2

1

尽量避免在脚本中设置原始样式，以保持代码不显眼和分离。您可以在 CSS 中设置背景图像，然后稍后在 jQuery 中更改它的值。

不确定您的 HTML 是如何设置的，但请确保您的 CSS 在 HTML 顺序中的脚本之前加载。如果您的脚本首先加载，您将遇到一些渲染问题。把你的<link>or放在使用它的<style>前面。<script>

我只是猜测这些建议，因为我看不到 jQuery 代码。

于 2014-01-16T18:12:19.477 回答
0

jQuery 很可能导致事件重复。为了解决这个问题，我建议在函数中使用 jQuery .stop。

考虑：

$("#option-div").stop(true,false).animate({ //this is assuming you are using animate, swap this out for the event you are using

//只是为了让您知道，如果您将其设置为 false，false 它将跳过事件并直接进入完成的结果，在这种情况下动画不会触发。

此外，如果事件已经处于活动状态，请考虑使用 if 语句来防止调用该事件。

考虑：

if($("#option-div").not(':animated')){
else { // your code here

如果您提供 jQuery 代码，会更容易理解问题并为您提供帮助，我会评论但还没有 50 个代表。

于 2013-08-28T12:27:19.560 回答