divを順次スクロールする

Question

私はスライダーdivの中にいくつかのアイテムを持っていますが、スキップクラスのclickイベントが発生するたびに-299pxの左にアニメートしたいので、ノーママルポジションに戻るとアニメートします。

どうすればよいですか？

私は試しましたが、-299pxだけアニメーションされて停止します。

は、私はいくつかのHTML、CSSとjQueryの例ダウン書かれています：

CSS

<style> 
.items{ 
    width:299px; 
    height:80px; 
    float:left; 
    color:white; 
} 
.slider{ 
    min-width:1495px; 
    height:80px; 
} 
.container{ 
    width:299px; 
    height:80px; 
} 

.one{ 
background-color:red; 
} 
.two{ 
background-color:yellow; 
} 
.three{ 
background-color:red; 
} 

を

HTML

<a href='#' class='skip'>Skip</a> 
<div class='container'> 
    <div class='slider'> 
     <div class='items one'>Item 1</div> 
     <div class='items two'>Item 2</div> 
     <div class='items three'>Item 3</div> 
    </div> 
</div> 

jQueryの

//skiping check em outerHTML 

$(document).on('click','.skip',function(e){ 
    e.preventDefault(); 
    $('.slider').animate({marginLeft:"-299px"},"fast"); 

    //stop default behaviour 
    return false; 
}); 

Answer 1

var $slider = $('.slider'); 
 
$(document).on('click','.skip',function(e){ 
 
    e.preventDefault(); 
 
    
 
    if (parseInt($slider.css('marginLeft')) < -(299 * $slider.find('.items').length - 1)) { 
 
     $slider.animate({marginLeft:"0px"}, "fast"); 
 
    } else { 
 
     $slider.animate({marginLeft: "-=299px"}, "fast"); 
 
    } 
 
});

.items{ 
 
    width:299px; 
 
    height:80px; 
 
    float:left; 
 
    color:white; 
 
} 
 
.slider{ 
 
    min-width:1495px; 
 
    height:80px; 
 
} 
 
.container{ 
 
    width:299px; 
 
    height:80px; 
 
} 
 

 
.one{ 
 
background-color:red; 
 
} 
 
.two{ 
 
background-color:yellow; 
 
} 
 
.three{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='skip'>Skip</a> 
 
<div class='container'> 
 
    <div class='slider'> 
 
     <div class='items one'>Item 1</div> 
 
     <div class='items two'>Item 2</div> 
 
     <div class='items three'>Item 3</div> 
 
    </div> 
 
</div>

Answer 2

あなたのコードであるは等しい-299pxになるためにのmargin-leftプロパティを設定します。この変更を後で実行するには、以前のmargin-leftの値を取得し、その値をどれだけ減らしておく必要があります。

あなたのおかげで、jQueryは手作業でデクリメントする手間を省き、ちょうど-299pxの代わりに-=299pxを使用します。私が欲しい、まさに

$(document).on('click','.skip',function(e){ 
 
    e.preventDefault(); 
 
    $('.slider').animate({marginLeft:"-=299px"},"fast"); 
 
    //        ^magic 
 

 
    //stop default behaviour 
 
    return false; 
 
});

.items{ 
 
    width:299px; 
 
    height:80px; 
 
    float:left; 
 
    color:white; 
 
} 
 
.slider{ 
 
    min-width:1495px; 
 
    height:80px; 
 
} 
 
.container{ 
 
    width:299px; 
 
    height:80px; 
 
} 
 

 
.one{ 
 
background-color:red; 
 
} 
 
.two{ 
 
background-color:yellow; 
 
} 
 
.three{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='skip'>Skip</a> 
 
<div class='container'> 
 
    <div class='slider'> 
 
     <div class='items one'>Item 1</div> 
 
     <div class='items two'>Item 2</div> 
 
     <div class='items three'>Item 3</div> 
 
    </div> 
 
</div>