6

malsupの素晴らしいjQueryサイクルが実行されているページがあります。最新バージョン（2.99）とSafari5.0.5を使用しています。私はこれまで次の問題に遭遇したことがなく、少し奇妙に思えます。

問題

ページが読み込まれるとき、.slides要素の幅は654ピクセルしかない場合があります。cssファイルで960pxに設定しています。しかし、JavaScriptを使用して.slides要素の幅を取得すると、1271pxの幅であると表示されます。は？この問題はFirefox（3.6.16）でも時折発生しますが、Safariほどではありません。奇妙なことに、IE8でこのエラーを再現できないようです。

私のコードはすべてW3Cで有効です（border-radiusへの3回の呼び出しを除く）。おそらく、フォーム要素をサイクルコンテナとして使用することに制限がありますか？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;
    }

ここで（うまくいけば）実際の「バグ」を見ることができます。これが他の人に起こっていないかどうか知りたいです（F5を数回押す必要があるかもしれません）。

この厄介な小さなバグを修正したいと思います。サイクル後にコンテナの幅を設定する回避策（間違いなく間違った幅に）は、問題の半分しか修正しません。次のスライドに移動すると、幅が半分になります。次のスライド、それは再びそれを半分にします。したがって、スライド3の後、すべてのコンテンツを240px幅までスクイーズします。

これに対する解決策は、すべての人にFirefox / IEの使用を強制することだと思います（会社のイントラネットに常駐します）。

事前に助けと洞察をありがとう！

ダン

更新されたリンクを編集します： https ：//necms.com.au/cycle_oddities.php

4

4 に答える 4

5

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());
     },   
  });
于 2012-04-26T14:27:24.740 に答える
1

これは、jQuery Cycle のバグのようです。フロートされた子要素が原因なのか、これが発生したときに通常ページに複数の jQuery Cycle インスタンスがあるという事実が原因なのかはわかりません。もっと深く掘り下げる必要があります。

私にとってうまくいった回避策の1つは、オプションでコンテナーのheightとを設定し、スライドがコンテナーでなければならないことを次のように指定することでした。widthcyclefit

 $('#myCycle').cycle({
      fx: 'scrollHorz',
      width: 430,
      height: 100,
      fit: 1
 });
于 2012-03-20T23:11:42.623 に答える
0

次のように設定してみてください。

containerResize: 0、slideResize: 0

私のために働いた。

$('.slides').cycle({
   fx: 'scrollHorz',
   nowrap: 0,
   fit: 1,
   timeout: 0,
   next: '.next',
   prev: '.prev',
   speed: 250,
   containerResize: 0,
   slideResize: 0
});
于 2013-02-13T19:18:28.020 に答える