Javascript CSS转换错误

我有一对div，它可以在点击时调整大小，除了每隔一段时间div会在调整大小之前闪烁之外，它工作得很好。我做了很多研究，每个人都同意应该用“-webkit backface visibility:hidden”修复它，但我已经尝试过了，它没有改变任何东西。它在chrome和firefox中都失败了。我的意思是，有时它工作得很好，而有时它只是闪烁得非常可怕

有什么问题吗？ 它在jquery中吗？在css中

感谢您的帮助

我的JS：

（函数（$）{

以下是JSFIDLE：

---

非常感谢！

之所以它们的宽度开始越来越小，是因为您根据当前的宽度设置了要更改的宽度，因此当一个宽度在转换过程中被单击时，这些值将被丢弃。要纠正这一点，您可以尝试根据最初的窗口大小和窗口大小来计算大小宽度调整大小，但我建议和使用的方法是使用

.on

和

.off

禁用单击，并使用

设置间隔

转换的持续时间

右div换行到下一行的另一个问题是由于宽度临时占用的空间大于窗口宽度。我假设这是因为有时div在不同的时间只是稍微设置了动画，因此一个在另一个收缩之前展开，并将其扔到下一行。我通过减小这两个部分都增加了几个像素，并使用了一个负的边距，增加了填充技巧，使右边的div称为

images

，以占据我删除的空间。这一部分可能可以用比我更干净的方式来完成，比如在初始计算中的某个地方或CSS中包含少量的减少，但是对于这个demo我不认为这是一个太大的问题，它的功能很好，是为了向你展示这个问题

下面是更改后的jQuery

(function ($) {
    setup = function setup() {
        var windowWidth;
        $('.day').each(function () {
            var $this = $(this),
                links = $('.links', $this),
                images = $('.images', $this),
                largeWidth,
                smallWidth,
                linksWidth,
                imagesWidth,
                count = 0;
            var imagesClick = function () {
                images.off('click');
                links.off('click');                
                windowWidth = $(window).width();
                if(count === 0)
                {
                    linksWidth = $('.links', $this).width() - 2;
                    imagesWidth = $('.images', $this).width() - 2;
                    images.css({'margin-right': "-=4", 'padding-right': "+=4"});
                    count++;
                } else{
                    linksWidth = $('.links', $this).width();
                    imagesWidth = $('.images', $this).width();
                }            
                largeWidth = Math.max(linksWidth, imagesWidth);
                smallWidth = Math.min(linksWidth, imagesWidth);
                if (windowWidth < 850) {
                    images.width(largeWidth);
                    links.width(smallWidth);
                    setTimeout(function () {
                        images.on('click', imagesClick);
                        links.on('click', linksClick);
                    }, 300);
                }
            }
            images.on('click', imagesClick);
            var linksClick = function () {
                images.off('click');
                links.off('click');

                windowWidth = $(window).width();
                if(count === 0)
                {
                    linksWidth = $('.links', $this).width() - 2;
                    imagesWidth = $('.images', $this).width() - 2;
                    images.css({'margin-right': "-=4", 'padding-right': "+=4"});
                    count++;
                } else{
                    linksWidth = $('.links', $this).width();
                    imagesWidth = $('.images', $this).width();
                }   

                largeWidth = Math.max(linksWidth, imagesWidth);
                smallWidth = Math.min(linksWidth, imagesWidth);

                if (windowWidth < 850) {
                    links.width(largeWidth);
                    images.width(smallWidth);
                    setTimeout(function () {
                        images.on('click', imagesClick);
                        links.on('click', linksClick);
                    }, 300);
                }
            }
            links.on('click', linksClick);
        });
    }
    $(document).ready(setup);
}(jQuery))

（函数（$）{
setup=函数setup（）{
窗宽；
$（'.day'）。每个（函数（）{
变量$this=$（this），
links=$（'.links'，$this），
图像=$（'.images'，$this），
宽幅，
小宽度，
林克斯威特，
imagesWidth，
计数=0；
var imageslick=函数（）{
image.off（'click'）；
links.off（'click'）；
windowWidth=$（window.width（）；
如果（计数==0）
{
linksWidth=$（'.links'，$this）.width（）-2；
imagesWidth=$（'.images'，$this）.width（）-2；
css（{'margin-right'：“-=4”，'padding-right'：“+=4”}）；
计数++；
}否则{
linksWidth=$（'.links'，$this.width（）；
imagesWidth=$（'.images'，$this.width（）；
}            
largeWidth=数学最大值（linksWidth、imagesWidth）；
smallWidth=Math.min（linksWidth、imagesswidth）；
如果（窗宽<850）{
图像。宽度（大宽度）；
链接宽度（小宽度）；
setTimeout（函数（）{
图像。在（'单击'，图像单击）；
links.on（'click'，links单击）；
}, 300);
}
}
图像。在（'单击'，图像单击）；
var linksClick=函数（）{
image.off（'click'）；
links.off（'click'）；
windowWidth=$（window.width（）；
如果（计数==0）
{
linksWidth=$（'.links'，$this）.width（）-2；
imagesWidth=$（'.images'，$this）.width（）-2；
css（{'margin-right'：“-=4”，'padding-right'：“+=4”}）；
计数++；
}否则{
linksWidth=$（'.links'，$this.width（）；
imagesWidth=$（'.images'，$this.width（）；
}   
largeWidth=数学最大值（linksWidth、imagesWidth）；
smallWidth=Math.min（linksWidth、imagesswidth）；
如果（窗宽<850）{
链接宽度（大宽度）；
图像。宽度（小宽度）；
setTimeout（函数（）{
图像。在（'单击'，图像单击）；
links.on（'click'，links单击）；
}, 300);
}
}
links.on（'click'，links单击）；
});
}
$（文档）.ready（设置）；
}（jQuery）

您最终解决了问题吗？

.column {
  width: 50%;
  float: left;
  overflow: hidden;
  -webkit-transition: width 0.3s linear;
  -moz-transition: width 0.3s linear;
  -o-transition: width 0.3s linear;
  transition: width 0.3s linear;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;

  -webkit-perspective: 1000;
  -webkit-transform:translate3d(0,0,0);
  -webkit-transform: translateZ(0); 
}

(function ($) {
    setup = function setup() {
        var windowWidth;
        $('.day').each(function () {
            var $this = $(this),
                links = $('.links', $this),
                images = $('.images', $this),
                largeWidth,
                smallWidth,
                linksWidth,
                imagesWidth,
                count = 0;
            var imagesClick = function () {
                images.off('click');
                links.off('click');                
                windowWidth = $(window).width();
                if(count === 0)
                {
                    linksWidth = $('.links', $this).width() - 2;
                    imagesWidth = $('.images', $this).width() - 2;
                    images.css({'margin-right': "-=4", 'padding-right': "+=4"});
                    count++;
                } else{
                    linksWidth = $('.links', $this).width();
                    imagesWidth = $('.images', $this).width();
                }            
                largeWidth = Math.max(linksWidth, imagesWidth);
                smallWidth = Math.min(linksWidth, imagesWidth);
                if (windowWidth < 850) {
                    images.width(largeWidth);
                    links.width(smallWidth);
                    setTimeout(function () {
                        images.on('click', imagesClick);
                        links.on('click', linksClick);
                    }, 300);
                }
            }
            images.on('click', imagesClick);
            var linksClick = function () {
                images.off('click');
                links.off('click');

                windowWidth = $(window).width();
                if(count === 0)
                {
                    linksWidth = $('.links', $this).width() - 2;
                    imagesWidth = $('.images', $this).width() - 2;
                    images.css({'margin-right': "-=4", 'padding-right': "+=4"});
                    count++;
                } else{
                    linksWidth = $('.links', $this).width();
                    imagesWidth = $('.images', $this).width();
                }   

                largeWidth = Math.max(linksWidth, imagesWidth);
                smallWidth = Math.min(linksWidth, imagesWidth);

                if (windowWidth < 850) {
                    links.width(largeWidth);
                    images.width(smallWidth);
                    setTimeout(function () {
                        images.on('click', imagesClick);
                        links.on('click', linksClick);
                    }, 300);
                }
            }
            links.on('click', linksClick);
        });
    }
    $(document).ready(setup);
}(jQuery))