bằng cách sử dụng jQuery .animate để animate một div từ phải sang trái?

Tôi có một div hoàn toàn được đặt tại top: 0px và right: 0px, và tôi muốn sử dụng jquery's .animate() để tạo hiệu ứng động từ vị trí hiện tại của nó thành left: 0px. Làm thế nào để làm điều này? Tôi dường như không thể làm việc này:bằng cách sử dụng jQuery .animate để animate một div từ phải sang trái?

$("#coolDiv").animate({"left":"0px"}, "slow");

Tại sao điều này không hiệu quả và làm cách nào để hoàn thành những gì tôi đang tìm kiếm?

Cảm ơn !!

Nguồn

2010-06-15 Alex

Tôi nghĩ lý do nó không hoạt động có cái gì để làm với thực tế là bạn có tập right vị trí, nhưng không phải là left.

Nếu bạn tự đặt left đến vị trí hiện tại, có vẻ như đi:

Sống dụ:http://jsfiddle.net/XqqtN/

var left = $('#coolDiv').offset().left; // Get the calculated left position 

$("#coolDiv").css({left:left}) // Set the left to its calculated position 
      .animate({"left":"0px"}, "slow");

EDIT:

Xuất hiện như mặc dù Firefox hoạt động như mong đợi vì tính toán của nó Vị trí ed left có sẵn dưới dạng giá trị đúng theo pixel, trong khi trình duyệt dựa trên Webkit và dường như là IE, trả lại giá trị là auto cho vị trí bên trái.

Vì auto không phải là vị trí bắt đầu cho hoạt ảnh, hoạt ảnh có hiệu quả chạy từ 0 đến 0. Không thú vị lắm khi xem. : o)

Đặt vị trí bên trái theo cách thủ công trước khi hình động như trên khắc phục sự cố.

Nếu bạn không thích làm lộn xộn cảnh quan với các biến, đây là một phiên bản tốt đẹp của cùng một điều mà obviates sự cần thiết cho một biến:

$("#coolDiv").css('left', function(){ return $(this).offset().left; }) 
      .animate({"left":"0px"}, "slow");

Nguồn

2010-06-15 02:11:22 user113716

Trong bài đọc của tôi về nguồn jQuery http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js, để xác định vị trí jQuery đã chuẩn hóa một vị trí phần tử thành "top" và " còn lại "tương đối" dưới mui xe "- Tôi tin rằng câu trả lời của bạn là không chính xác. Ví dụ: ví dụ của tôi hoạt động mặc dù giá trị css được đặt cho đúng và giá trị animate được đặt ở bên trái. – artlung

@artlung - Cảm ơn bạn đã liên kết nhưng bạn đã thử nghiệm trình duyệt nào? Tôi đang thử nghiệm trong Safari và hoạt ảnh không hoạt động mà không đặt vị trí bên trái. Nó nhảy trực tiếp sang trái, có lẽ là kết quả của giá trị ban đầu của trái là 'auto'. – user113716

Đã kiểm tra trong Firefox và hoạt động rất tốt. Đặc biệt, Chrome và Safari hoạt động như bạn đã chỉ ra. Vì vậy, nó thực hiện/thay đổi/đến đúng vị trí, nhưng nó không hiển thị fx tạm thời! Thêm jQueryUI (cái được cho là cho phép tạo ra những thứ bổ sung mà jQuery bình thường không thể làm) không làm thay đổi đối với Chrome và Safari. – artlung

Dưới đây là một câu trả lời tối thiểu cho thấy ví dụ của bạn làm việc:

<html> 
<head> 
<title>hello.world.animate()</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
    type="text/javascript"></script> 
<style type="text/css"> 
#coolDiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    background-color: #ccc; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it. 
    $("#coolDiv").animate({'left':0}, "slow"); 
    // So basically if you *start* with a right position 
    // then stick to animating to another right position 
    // to do that, get the window width minus the width of your div: 
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow'); 
    // sorry that's so ugly! 
}); 
</script> 
</head> 
<body> 
    <div style="" id="coolDiv">HELLO</div> 
</body> 
</html>

gốc trả lời:

Bạn có:

$("#coolDiv").animate({"left":"0px", "slow");

Corrected:

$("#coolDiv").animate({"left":"0px"}, "slow");

Tài liệu: http://api.jquery.com/animate/

Nguồn

2010-06-15 02:03:07 artlung

lời xin lỗi chân thành của tôi, nhưng đó là một đơn giản lỗi copy/paste, không vấn đề. – Alex

Hoạt ảnh 'right' position ... thay thế hợp lệ. : o) – user113716

nên phương pháp .animate chỉ hoạt động nếu bạn đã đưa ra một thuộc tính vị trí cho một phần tử, nếu nó không di chuyển?

ví dụ tôi đã thấy rằng nếu tôi khai báo div nhưng tôi không khai báo gì trong css, nó không giả định vị trí mặc định của nó và nó không di chuyển nó vào trang, ngay cả khi tôi khai báo lề tài sản: x w y z;

Nguồn

2013-03-15 10:34:37

này làm việc cho tôi

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");

Nguồn

2014-05-15 09:02:40

Nếu bạn biết chiều rộng của phần tử con bạn đang tạo hiệu ứng động, bạn có thể sử dụng và animate một lề bù đắp là tốt. Ví dụ, điều này sẽ làm động từ trái: 0 sang phải: 0

CSS:

.parent{ 
width:100%; 
position:relative; 
} 

#itemToMove{ 
position:absolute; 
width:150px; 
right:100%; 
margin-right:-150px; 
}

Javascript:

$("#itemToMove").animate({ 
"margin-right": "0", 
"right": "0" 
}, 1000);

Nguồn

2015-08-01 19:03:31 freeworlder

bằng cách sử dụng jQuery .animate để animate một div từ phải sang trái?

Trả lời

Các vấn đề liên quan