Question

我有一个运行malsup的令人敬畏的jQuery循环的页面。我使用的是最新版本（2.99）和Safari 5.0.5。我之前没遇到过以下问题，看起来有点奇怪。

问题

有时，当页面加载时，.slides元素的宽度仅为654像素。我把它设置为css文件中的960px。但是，当我使用JavaScript获取.slides元素的宽度时，它表示宽度为1271px。咦？这个问题偶尔会出现在Firefox（3.6.16）上，但没有Safari那么近。奇怪的是，我似乎无法在IE8中复制此错误。

我的代码全部是W3C有效（除了3次调用border-radius之外）。使用表单元素作为循环容器可能存在限制吗？ Safari是否存在错误行为？

JS：

$(document).ready(function(){
  var sw = $('.slides').width();
  $('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250
  });
  if (sw != 960){
    $('.slides').css('width','960px');//to set the width to 960, so it doesn't clip the form
    $('.slides').css('background-color','#ff00ff');//so i know when the problem is occuring
  }
});

CSS：

#content{
    float:left;
    width:100%;
}

    .wrapme{
        width:960px;
        height:auto;
        margin:0 auto;
    }

    .slides{
        float:left;
        width:960px;
        height:auto;
        overflow:auto;
    }

你可以（希望）看到行动here中的“错误”。我很想知道其他人是否没有这样做（可能需要多次按F5）。

我很想解决这个烦人的小虫子。在循环之后设置容器宽度的解决方法已经调整它（错误的宽度，毫无疑问）只能解决问题的一半。移动到下一张幻灯片后，它会将宽度减半。下一张幻灯片，它再次将它减半。因此，在幻灯片3之后，它将所有内容调整到240px宽。

我想解决这个问题的方法是强迫每个人使用Firefox / IE（它将驻留在公司内部网上）。

感谢您提前获得任何帮助和见解！

丹

修改更新链接：https://necms.com.au/cycle_oddities.php

Answer 1

有一个Jquery Cycle插件的错误...我找到的解决方案是设置after回调函数并在那里手动设置高度。

$('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250,
    after: function (){
        $(this).parent().css("height", $(this).height());
     },   
  });

Answer 2

这似乎是jQuery Cycle的一个错误。我不知道是不是因为浮动的子元素或者当发生这种情况时页面上通常存在多个jQuery Cycle实例。我需要深入挖掘。

对我有用的一个解决方法是在height选项中设置容器的width和cycle，然后指定幻灯片必须fit容器这样：

 $('#myCycle').cycle({
      fx: 'scrollHorz',
      width: 430,
      height: 100,
      fit: 1
 });

Answer 3

尝试设置以下内容：

containerResize：0， slideResize：0

为我工作。

$('.slides').cycle({
   fx: 'scrollHorz',
   nowrap: 0,
   fit: 1,
   timeout: 0,
   next: '.next',
   prev: '.prev',
   speed: 250,
   containerResize: 0,
   slideResize: 0
});

Answer 4

我用过它并且有效。循环尝试获取大小属性并将它们发回坏。

                after: function (){
                $(this).css("height", "");
                $(this).css("width", "");

jQuery循环似乎正在调整我的元素的高度

4 个答案: