gpt4 book ai didi

Jquery Slide 动画 UI - 最小化/最大化时的 Chrome Bug

转载 作者:行者123 更新时间:2023-12-01 08:16:12 25 4
gpt4 key购买 nike

关于我之前的问题; Jquery slide animation 。为了有一个 slider ,我使用了这个解决方案:

HTML

<div class="bigBox">
<div class="try2">
<h3 id="test2">CLICK THIS</h3>
<p>This is a demonstration of jQuery SimpleDialog.</p>
</div>
<div class="try">
<p id="haha">CLICK THIS</p>
<p>This is a demonstration of jQuery SimpleDialog.</p>
</div>
</div>

​JS

$('#haha').click(function() {
$('.try').hide("slide", {
direction: "left"
}, 1000);
$('.try2').show("slide", {
direction: "right"
}, 1000);
});​

CSS

div.bigBox {
background-color:transparent;
width:100px;
height:125px;
position: relative;
}

.try, .try2{
width:100px;
height:125px;
position: absolute;
}

.try {
background-color:green;
}

.try2{
background-color:yellow;
} ​

DEMO

问题是当您在 google chrome 中最小化/最大化页面(缩放不是 100%)时, slider 不再平滑滑动。但如果我在 firefox/IE 中测试它,它运行良好。

是什么原因导致谷歌浏览器中 slider 之间存在空格?这是谷歌浏览器的错误吗?我该如何修复它?谢谢。

最佳答案

诚然,我不确定为什么它在 Chrome 中这样做,但这里有一个稍微不同的方法,在放大一点​​时对我有用。

http://jsfiddle.net/CV7fd/20/

基本概念是将两个子元素“try”和“try2”包装在另一个div中(称为“overflowDiv”)。然后,我们将“bigBox”div 的大小限制为 100px,并将其 CSS 溢出属性设置为“隐藏”。 “overflowDiv”的宽度与“try”和“try2”的宽度一样宽,这样它们就不会换行(200px - 请记住在此计算中包括填充、边框、宽度和边距)。然后,“bigBox”实际上成为“overflowDiv”内容的窗口。然后动画简单地调整“overflowDiv”的左侧位置。

结果是我们最终只对一个元素而不是两个元素进行动画处理,因此它们更有可能彼此齐平地出现。

关于Jquery Slide 动画 UI - 最小化/最大化时的 Chrome Bug,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10583456/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com