0

金曜日のクイズを作っています！scrollLeft-jQueryエフェクトを使用して、次の質問に進みます。以前は問題なく使っていましたが、今は狂ったように飛び回っています。私は何が間違っているのですか？

サイト：www.carlpapworth.com/friday-quiz/

HTML：

                <div id="qWrap">
                    <ul id="qBox">
    <!--Q1-->           <li id="q1" class="qContainer">
                        <div class="qQuestion"><?php echo $Q1; ?>
                        </div>
                        <ul class="qAnswers">
                            <li><a href="#q2" class="<?php echo $Q1aClass; ?>"><h3><?php echo $Q1a; ?></h3></a></li>
                            <li><a href="#q2" class="<?php echo $Q1bClass; ?>"><h3><?php echo $Q1b; ?></h3></a></li>
                            <li><a href="#q2" class="<?php echo $Q1cClass; ?>"><h3><?php echo $Q1c; ?></h3></a></li>
                        </ul>
                    </li>
<!--Q2-->           <li id="q2" class="qContainer">
                        <div class="qQuestion"><?php echo $Q2; ?>
                        </div>
                        <ul class="qAnswers">
                            <li><a href="#q3" class="<?php echo $Q2aClass; ?>"><h3><?php echo $Q2a; ?></h3></a></li>
                            <li><a href="#q3" class="<?php echo $Q2bClass; ?>"><h3><?php echo $Q2b; ?></h3></a></li>

                            <li><a href="#q3" class="<?php echo $Q2cClass; ?>"><h3><?php echo $Q2c; ?></h3></a></li>
                        </ul>
                    </li>
     </ul>
    </div>

CSS：

#qWrap{
width: 480px;
height: 260px;
margin: 0 auto;
overflow: scroll;
}

#qBox{
width: 1100%;
height: 260px;
display: block;
}


li.qContainer {
position: relative;
width: 9%!important;
height: 260px!important;
padding: 0px 0px;
margin: 0 50px 0 0px;
float: left;
}


.qQuestion {
width: 480px;
height: 50px;
padding: 10px 0px;
font-family: corbel;
font-size: 28px;
text-align: center;
color: #ffffff;
}

JS：

$(document).ready(function() {  
    $('.qAnswers li a').bind('click',function(event){
                        var $anchor = $(this);
                        $('#qWrap').stop().animate({
                            scrollLeft: $($anchor.attr('href')).offset().left
                        }, 2000);
                        event.preventDefault();
                    });
 });
4

2 に答える 2

1

生成されたマークアップが不良です。コンソールでソースを表示します。疑似マークアップは次のとおりです。

<qwrap>
  <qbox>
    <li.qcontainer />
    <q2 />
    <li.qcontainer>
      <q3 />
    </li.qcontainer>
  </qbox>
</qwrap>

次のクエリも実行すると、それらが別の場所にスクロールする理由がわかります。マークアップがオフになっているため、は質問offsetの別の値に基づいて計算しているoffsetParentため、一貫性のないスクロールが発生します。

$('#q2').offsetParent();
$('#q3').offsetParent();

マークアップを修正すると、スクロールの問題が解消されます。

編集：マークアップが正しければ、属性 qWrapをチェックすることでスクロールする距離を計算できます。はドキュメントを基準にしていますが、親を基準にしたオフセットを報告します。http://api.jquery.com/position/を参照してくださいpositionoffsetposition

position: relativeqBoxに追加します。これはposition、質問のためにスクロールされているボックスに関連して作成されます。

offsetそうすれば、あなたのコードは、に変更することを除いて、あなたがすでに持っていたものとほとんど同じですposition。

$(document).ready(function() {  
    $('.qAnswers li a').bind('click',function(event){
                        var $anchor = $(this);
                        $('#qWrap').stop().animate({
                            scrollLeft: $($anchor.attr('href')).position().left
                        }, 2000);
                        event.preventDefault();
                    });
 });
于 2013-02-26T19:33:46.273 に答える
0

.stop（）に、

.stop(true, true).animate

それがあなたを助けるかどうか見てください。

于 2013-02-26T19:32:16.040 に答える