0

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

关于什么是错的任何想法？它在jquery中吗？在CSS中？

任何帮助表示赞赏。

我的 JS：

(函数($){

setup = function setup(){
        var windowWidth;        

        $('.day').each(function(){

            var $this = $(this),
                links = $('.links', $this),
                images = $('.images', $this),
                largeWidth,
                smallWidth,
                linksWidth,
                imagesWidth;



                images.click(function(){

                    windowWidth = $(window).width();
                    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);
                    }


                })

                 links.click(function(){

                    windowWidth = $(window).width();
                    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);
                    }
                })


        });


}

$(document).ready(setup);

}(jQuery))

和CSS：

.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); 
}

这是jsfiddle：http: //jsfiddle.net/cKvYq/2/

非常感谢！

4

1 回答 1

0

它们的宽度开始动画越来越少的原因是因为您根据当前宽度设置了要更改的宽度，因此当在转换时单击一个时，这些值会被丢弃。为了解决这个问题，您可以尝试根据最初的窗口大小和窗口调整大小来计算大小宽度，但我推荐的方法和我使用的方法是使用过渡持续时间来.on禁用.off点击setInterval。

右 div 换行到下一行的另一个问题是宽度暂时占用超过窗口宽度引起的。我认为这是因为有时 div 在不同的时间只是稍微动画化，因此一个在其他合同将其扔到下一行之前扩展。我通过将它们的宽度减小几个像素并使用负边距来解决这个问题，增加填充技巧以调用正确的 divimages来占用我删除的空间。这部分可能会以比我更简洁的方式完成，例如在某处或可能在 CSS 中包括初始计算中的小幅减少，但对于这个演示，我认为这不是一个太大的问题，它功能良好，旨在向您展示问题

这是更新的 jsFiddle

这是更改后的 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))
于 2013-08-28T22:29:49.023 回答