Question

我正在尝试使用这个小提琴http://jsfiddle.net/KpuyT/3/但是，我不希望div无限滚动 - 而是我希望滚动在文本到达结尾时停止然后在鼠标移出时停止将其重置回原来的位置。我尝试了以下方法：

$(function(){
    var scroll_text,
        do_scroll = false;

    $('div.container').hover(
        function () {
            var $elmt = $(this);
            if ($elmt.find('div.title-holder a').width() > 130) {
                scroll_text = setInterval(function(){scrollText($elmt);}, 30);
                do_scroll = true;
            }
        },
        function () {
            if (do_scroll) {
                clearInterval(scroll_text);
                $(this).find('div.title-holder a').css({
                    left: 0
                });
            }
        },
        function (){
            $('div.container').scroll( function() {
                if ( $('div.container').scrollLeft() == ($('div.title-holder a').width() - $('div.container').width())) {
                    do_scroll = false;
                }
            });
        }
    );

    var scrollText = function($elmt){
        var left = $elmt.find('div.title-holder a').position().left - 1;
        left = -left > $elmt.find('div.title-holder a').width() ? $elmt.find('div.title-holder').width() : left;
        $elmt.find('div.title-holder a').css({
            left: left
        });
    };
});

但它不起作用。我该如何解决这个问题？

Answer 1

这可以解决，基于小提琴张贴：

//move

$('div.container').hover(function(){
var $elmt = $(this);
$elmt.find('div.title-holder a').animate({
    left: '-'+ ($elmt.find('div.title-holder a').width() - $('.container').width())
  }, 5000);    
});

//and return to 0

$('div.container').mouseleave(function(){
var $elmt = $(this);
$elmt.find('div.title-holder a').animate({
    left: 0
  }, 5000);    
});

FIDDLE

鼠标移动时jQuery水平滚动文本以在内容结束时停止

1 个答案: