0

左または右のボタンをホバーすると左右にスクロールするシェルフがあります。ただし、現時点では、これは定義された量だけスクロールします..そして、このシェルフは遅延読み込みによって読み込まれるため、シェルフの幅を知る実際の方法はありません.

確かに、数値を 99999999 に設定し、アニメーション速度を同様に高い数値に設定することもできますが、もっとスマートな方法があるのではないでしょうか? プラグインなし！

助けてくれてありがとう..

フィドル

$('.scroll-arrow').each(function(){
    var modifier = ($(this).hasClass('right')) ? 1 : -1;
    var sib = ('.shelf-slide');
    var sl = 0;

    $(this).hover(function() {
        sl = $(this).siblings(sib).scrollLeft();
        $(this).siblings(sib).stop();
        $(this).siblings(sib).animate({scrollLeft: sl + (modifier * 1000)}, 5000, 'linear');
    }, function() {
        $(this).siblings(sib).stop();
    });
});
4

1 に答える 1

1

このように矢印をホバーしている間、アニメーションを続ける関数を作成できます

function animatecontent(ele,modifier){//function to scroll
  var sl = ele.scrollLeft();
  //120 should be the width of the ".content" and 500 the time to scroll 1 ".content"
  ele.animate({scrollLeft: sl + (modifier * 120)}, 500, 'linear',function(){
        if(hover){//on callback if it is still hover call the same function
            animatecontent(ele,modifier);
        }
    });
};
var hover=false;
$('.scroll-arrow').each(function(){
    var modifier = ($(this).hasClass('right')) ? 1 : -1;
    var sib = ('.shelf-slide');
    $(this).hover(function() {
        hover=true;
    $(this).siblings(sib).stop();
      animatecontent($(this).siblings(sib),modifier);//pass the element to animate and the modifier     
    }, function() {
        hover=false;
        $(this).siblings(sib).stop();
    });
});

http://jsfiddle.net/A3mPw/7/

于 2013-10-31T16:49:01.050 に答える