bỏ đặt tham số css khi hoạt ảnh

Question

Tôi bắt đầu học jQuery. Tôi đã viết một mã, sẽ xoay vòng vị trí của một phần tử đã cho bằng cách gọi các hàm được lưu trữ trong một mảng. Đây hoạt động tốt cho mã này:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#right_column').css({zIndex:1000, position: 'absolute', right: 0, top:200 }); 
    $('body').css({overflow:'hidden'}); 
    var funcs = new Array(
        function(o){ 
         $(o).animate({right: 0, top:200}, 1000); 
        }, 
        function(o){ 
         $(o).animate({top: 0},1000); 
        }, 
        function(o){ 
         $(o).animate({right: 300},1000); 
        }, 
        function(o){ 
         $(o).animate({right: 300, top:200},1000); 
        } 
       ); 
    var flip=0; 
    $('#right_column').click(function self(){ 
      funcs[++flip % funcs.length]('#right_column'); 
    }); 
}); 
</script> 

nhưng nếu tôi thay đổi các tham số vị trí như thế này

var funcs = new Array(
        function(o){ 
         $(o).animate({right: 0, top:200}, 1000); 
        }, 
        function(o){ 
         $(o).animate({top: 0},1000); 
        }, 
        function(o){ 
         $(o).animate({left: 0},1000); 
        }, 
        function(o){ 
         $(o).animate({right: 300, bottom:0},1000); 
        } 
       ); 

nó phá vỡ.

Tôi giả định rằng các tham số bổ sung (trên cùng là < -> dưới cùng; bên trái < -> phải) can thiệp, giống như chúng sẽ làm trong css đơn giản.

Vì vậy, câu hỏi của tôi là: Làm cách nào để đặt lại thông số css thành không xác định?

chỉnh sửa

animate dường như không có khả năng xử lý auto lẽ. Nó không thay đổi hành vi. với css() hoạt động.

var funcs = new Array(
        function(o){ 
         $(o).css({right:0, bottom:0,left:'auto', top:'auto'}) 
         console.log('funcs 0'); 
        }, 
        function(o){ 
         $(o).css({top:0, right:0, left:'auto', bottom:'auto'}) 
         console.log('funcs 1'); 
        }, 
        function(o){ 
         $(o).css({left:0, top:0, right:'auto', bottom:'auto'}) 
         console.log('funcs 2'); 
        }, 
        function(o){ 
         $(o).css({right:'auto', top:'auto',left:0, bottom:0}) 
         console.log('funcs 3'); 
        } 
       ); 

chạy css({...:'auto'}) trước/sau animate() phá hủy (nguyên nhân) các hình ảnh động

bất kỳ gợi ý khác?

Answer 1

để thiết lập lại những giá trị thay đổi chúng để 'tự động'

top: auto; 
left: auto; 
right: 0px; 
bottom: 0px; 

Edit:

Bạn có thể thêm "mục tiêu".

<div id="top" style="position:absolute;left:0;top:0"></div> 
<div id="bottom" style="position:absolute;left:0;top:auto;bottom:0px"></div> 

Bây giờ bạn có thể sử dụng các giá trị của mục tiêu của bạn cho hình ảnh động của bạn:

$("#bottom").offset().top 
$("#bottom").offset().left 

Animation:

$(o).animate({ top : $("#bottom").offset().top, left : $("#bottom").offset().left });