Question

我有这个网站：http://store01.titus.biz/

它有一个应该在箭头上滚动的顶级菜单，但是他会像我想的那样移动，但现在我希望它能够无限移动直到一个人将鼠标移出。

我该怎么做？我试过旋转木马，但没成功。

还有一点，这可能是因为计时器的“hikups”，我怎么能让这个顺利呢？

<div class="row-fluid" style="position:relative;">
        <div class="span12 horizontal-category" style="height: 64px">                                 
          <span class="carousel-prev" id="carousel-category-prev"></span>
          <div class="j" style="position: absolute; clip: rect(auto, auto, 500px, auto);">
              <ul class="nav myCustomNav">       
                <?php
                    printCats();
                ?> 
               </ul>
          </div>
          <span class="carousel-next" id="carousel-category-next"></span>                                   
        </div> 
    </div>

<script>

        $(document).ready(function(){
            $(".myCustomNav li:first").addClass("current");
            $(".myCustomNav li:last").addClass("last");
            $(".last a").width(120);
            carousel();
        });

        var vel = 350;
        var timer;

        function carousel(){                
            $(".carousel-prev").hover(function(){
                timer = setInterval(hover_esquerda, vel);
            }, function(){ clearInterval(timer); });

            $(".carousel-next").hover(function(){
                timer = setInterval(hover_direita, vel);
            }, function(){ clearInterval(timer); });        
        }

        function hover_esquerda(){
            //anda para a esquerda
            if ($(".current").size() == 0){
                $(".myCustomNav li:first").addClass("current");
            }
            if ($(".current").nextUntil(".last").size() == 6){

                //$(".carousel-prev").addClass("disabled");

            } else {                
                $(".myCustomNav .current").removeClass("current").next().addClass("current");
                $(".myCustomNav").animate({
                    left: '-=' + $(".current").prev().width()
                }, 'slow');
            }
        }
        function hover_direita(){
            //anda para a direita               
            $(".myCustomNav .current").removeClass("current").prev().addClass("current");
            $(".myCustomNav").animate({
                left: '+=' + $(".current").width()
            }, 'slow');
        }

    </script>

Answer 1

解决“打嗝”问题。所以你可以将缓和设置为“线性”。这样的动画会很流畅。标准的宽松政策是“摆动”。这会加速和减慢动画。

$(".myCustomNav").animate({
                            left: '-=' + $(".current").prev().width()
                          }, 'slow', 'linear');

旋转木马菜单平滑度和无限

1 个答案: