animate（）並非一直有效

Question

我正在嘗試使用jQuery創建一個簡單的滑塊。

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'left': 0}, 300);
});

問題是當我單擊底部的類next的底部時，它只滑動一次，第二次單擊不起作用。

我怎樣才能解決這個問題？

https://jsfiddle.net/6t1wx95f/

Answer 1

簡單，使用$('li').animate({'left': '-=400px'}, 300); 接下來。

 $('.next').on('click', function() { $('li').animate({'left': '-=400px'}, 300); }); $('.back').on('click', function() { if(parseInt($('li').css('left')) <= 0){ if(parseInt($('li').css('left')) >= -400){ $('li').animate({'left': "0"}, 300); } else { $('li').animate({'left': '+=400px'}, 300); } } }); 

 .slider { overflow: hidden; width: 500%; } .slider ul { width: 500%; } .slider ul li { float: left; list-style: none; position: relative; transition: all 0.65s; } .next, .back { width: 100px; padding: 5px; text-align: center; background-color: skyblue; float: left; margin: 10px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slider"> <ul> <li> <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active"> </li> <li> <img src="https://www.w3schools.com/css/img_lights.jpg" alt=""> </li> <li> <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt=""> </li> <li> <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt=""> </li> <li> <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt=""> </li> </ul> </div> <div class="back">Back</div> <div class="next">Next</div> 

Answer 2

您的代碼僅向元素添加了一個left：和right：樣式。 它不會刪除/重置這些值，因此只能在第一次單擊時執行以下操作：

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'left': 0}, 300);
});

您只需要左右動畫（通過使用正值和負值），而不是兩者，例如

$('.next').on('click', function() {
    $('li').animate({'right': '400px'}, 300);
});

$('.back').on('click', function() {
    $('li').animate({'right': 0}, 300);
});

當然，這並不能使事情完全起作用（如果要為每張幻燈片制作動畫，則需要增加/減少移動量），但希望它能為您指明正確的方向。