0

私はこのフィドルを使用しようとしています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
        });
    };
});

しかし、うまくいきません。どうすればこれを修正できますか?

4

1 に答える 1

0

投稿されたフィドルに基づいて、これは解決できます：

//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);    
});

フィドル

于 2012-06-21T13:52:33.950 に答える