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通过检查position属性来计算滚动的距离。 offset是相对于文档的，而position将报告相对于父级的偏移量。见http://api.jquery.com/position/

添加position: relative到 qBox。这将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 回答