animate jquery chỉ làm việc một lần

Question

Tôi đang cố gắng sử dụng một tính năng hoạt hình đơn giản của jquery. Trong ứng dụng của tôi, tôi có hai nút "Slide Right" và "Slide Left". Khi chúng ta nhấp vào các nút này, chúng sẽ di chuyển hộp sang trái hoặc phải tương ứng. Nút di chuyển phải của tôi đang hoạt động hoàn hảo nhưng nút di chuyển phải của tôi chỉ hoạt động một lần. Có gì sai với mã của tôi? Dưới đây là mã của tôi:

$(document).ready(function() { 
 

 
    $("#slideRightButton").click(function() { 
 
    $("#boxToBeMoved").animate({ 
 
     left: '+=10%' 
 
    }); 
 
    }); 
 

 
    $("#slideLeftButton").click(function() { 
 
    $("#boxToBeMoved").animate({ 
 
     right: '+=10%' 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<button id="slideRightButton">Slide Right</button> 
 
<button id="slideLeftButton">Slide Left</button> 
 

 
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
 

 
<div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Đoạn mã trên chỉ là một phần mở rộng của hướng dẫn jquery bởi W3Schools có thể tìm thấy here

Answer 1

Bạn đang thay đổi left và right tài sản của hộp , Có vẻ như thuộc tính right đang được ưu tiên và ngăn không cho việc làm trái.

Nếu bạn làm cho cả hai sử dụng cùng một thuộc tính, một thuộc tính đó và thuộc tính còn lại, nó sẽ hoạt động.

$("#slideRightButton").click(function(){ 
    $("div").animate({left: '+=10%'}); 
}); 
$("#slideLeftButton").click(function(){ 
    $("#boxToBeMoved").animate({left: '-=10%'}); 
}); 

Answer 2

Được cập nhật để bao gồm yêu cầu của tác giả không vượt quá chiều rộng tối đa.

Để thực hiện việc này, tôi đã bao gồm div bao bọc có chiều rộng cố định.

Khi trượt sang phải, nó sẽ kiểm tra xem giá trị có lớn hơn chiều rộng của bố mẹ hay không và nếu dương, trả về.

Tương tự khi trượt sang trái, nhưng nó trả về nếu giá trị âm, ngăn hộp trượt ngoài giới hạn của div mẹ.

$(document).ready(function() { 
 

 
    const slideVal = 30; // slide value (in pixels) 
 

 
    $("#slideRightButton").click(function() { 
 
    var box = $("#boxToBeMoved"); 
 
    if (parseInt(box.css("left")) + slideVal > parseInt(box.parent().width())) return; 
 
    box.animate({ 
 
     left: '+=' + slideVal 
 
    }); 
 
    }); 
 

 
    $("#slideLeftButton").click(function() { 
 
    var box = $("#boxToBeMoved"); 
 
    if (parseInt(box.css("left")) - slideVal < 0) return; 
 
    box.animate({ 
 
     left: '-=' + slideVal 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<button id="slideRightButton">Slide Right</button> 
 
<button id="slideLeftButton">Slide Left</button> 
 

 
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
 

 
<div id="wrapper" style="width: 200px"> 
 
    <div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> 
 
</div>