2011-11-07 35 views
6

Có cách nào để thực hiện lắc hộp div khi tải trang không? Có lẽ chỉ một hoặc hai lần?Thực hiện lắc div khi tải trang?

Cập nhật: Tại URL này tôi vẫn chưa tải trang, tôi đang làm gì sai? http://tinyurl.com/79azbav

Tôi nghĩ mình bị kẹt ở tải trên trang; thất bại có thể được nhìn thấy ở đây: Get onpage to work correctly

Tôi cũng đã cố gắng bắt đầu các hoạt hình với tôi đã thực hiện body onLoad:

<body onLoad="document.emvForm.EMAIL_FIELD.focus(); document.ready.entertext.shake();" > 

Nhưng vẫn thất bại như một nhà vô địch.

+6

Nhấp vào làm mới và đập màn hình của bạn! :) – Louie

+0

Tôi không hiểu. –

+0

@Louie thats dự phòng của tôi cho IE cũ =) –

Trả lời

24

Hãy thử một cái gì đó như thế này:

EDIT:
Changed Shake()-shake() cho phù hợp với công ước jQuery.

jQuery.fn.shake = function() { 
    this.each(function(i) { 
     $(this).css({ "position": "relative" }); 
     for (var x = 1; x <= 3; x++) { 
      $(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50); 
     } 
    }); 
    return this; 
} 

EDIT:
Trong ví dụ của tôi vị trí left được thiết lập để 25, nhưng bạn có thể giảm này cho một hiệu ứng tinh tế hơn hoặc tăng nó cho một hiệu ứng rõ rệt hơn.

Sử dụng shake chức năng:

$("#div").shake(); 

Dưới đây là một jsFiddle đó chứng tỏ nó: http://jsfiddle.net/JppPG/3/

+0

Cảm ơn bạn đã phản hồi, nhưng tôi có thể xác định div nào áp dụng cho? –

+0

@Truth: Cảm ơn bạn đã chứng minh việc triển khai. –

+0

@LouieLouie: Đây là một chức năng jQuery, vì vậy bạn có thể sử dụng nó trên bất kỳ phần tử nào trên trang. –

4

biến thể nhẹ trên @ câu trả lời tuyệt vời James-Johnson cho ~ lắc ~ yếu tố được absolute vị trí. Hàm này lấy vị trí hiện tại của left của phần tử và lắc nó tương ứng với điểm này. Tôi đã bị rung lắc ít khí bạo, dấu gas 10.

jQuery.fn.shake = function() { 
    this.each(function (i) { 
     var currentLeft = parseInt($(this).css("left")); 
     for (var x = 1; x <= 8; x++) {    
      $(this).animate({ left: (currentLeft - 10) }, 10).animate({ left: currentLeft }, 50).animate({ left: (currentLeft + 10) }, 10).animate({ left: currentLeft }, 50); 
     } 
    }); 
    return this; 
} 
Các vấn đề liên quan