Phát triển từ hình động trung tâm với JQuery

Question

Tôi đang tìm cách có một popup div từ một nút. Khi nút được nhấp, tôi muốn cửa sổ bật lên phát triển ra ngoài từ giữa nút và đồng thời, trượt tới giữa màn hình. Tôi không nghĩ điều này quá khó nhưng tôi không thể tìm thấy bất kỳ đoạn trích nào ở bất cứ đâu. Mọi sự trợ giúp sẽ rất được trân trọng.

Nhờ sự giúp đỡ của Jamie Dixon, tôi nhận được mã này hoạt động.

$('#grower').css({ 
    backgroundColor: '#FFFFFF', 
    border: '10px solid #999', 
    height: '0px', 
    width: '0px', 
    color: '#111111', 
    fontWeight: 'bold', 
    padding: '10px', 
    display: 'none', 
    position: 'absolute', 
    left: $(this).position().left, 
    top: $(this).position().top 
}).appendTo('#overlay').fadeIn(0).animate({ 
    position: 'absolute', 
    height: '200px', 
    width: '600px', 
    marginTop: '-120px', 
    marginLeft: '-320px', 
    display: "", 
    top: ((($(parent).height() - $(this).outerHeight())/2) + $(parent).scrollTop() + "px"), 
    left: ((($(parent).width() - $(this).outerWidth())/2) + $(parent).scrollLeft() + "px") 
}, 1000); 

Answer 1

Bạn có thể sử dụng giao diện người dùng jQuery với phương thức hiển thị truyền trong "tỷ lệ" làm tham số.

$('#growwer').show("scale",{}, 1000); 

Working example

Để trượt yếu tố của bạn đến trung tâm o trang tôi đã tạo ra một phiên bản sửa đổi của Tony L's chức năng jQuery tìm thấy ở đây: Using jQuery to center a DIV on the screen.

Working Example

Cập nhật

Dưới đây là một ví dụ làm việc của hai hình ảnh động chạy simultaniously:

http://jsfiddle.net/wNXLY/1/

Để có được điều này để làm việc tôi bao gồm một tham số thêm vào animate chức năng chuyển vào: {duration: durationLength, queue: false}