Hiệu ứng tải trang với jQuery cực đẹp

jQuery fadeIn và fadeOut là hiệu ứng tải trang cho blog và website. Nó làm nổi bật nền vì tải trang ban đầu blog này là khá chậm vì javascript mà tôi sử dụng để khi tải trang mở cửa nhìn một chút phân tâm và có cái nhìn thiếu gọn gàng. Để khắc phục điều này, nguồn cảm hứng có để trang trải các khoản thâm hụt để khi trang blog đã mở trong màn hình bố trí hoàn toàn thích hợp của từng yếu tố.

 Nhưng hãy nhớ, điều này không có nghĩa là tăng tốc độ tải nhưng chỉ thao tác trang blog trong quá trình tải để khi tải trình duyệt (đọc javascript khá dài) và đôi khi gây ra các trang xem một chút rối bời được hiển thị sau đó tôi sử dụng cách này để trang trải các khả năng các.

Có lẽ nếu có của bạn đang gặp vấn đề cũng như với blog này, có thể sử dụng phương pháp này là lựa chọn thay thế để thao tác trang với fadeIn và fadeOut hiệu lực để làm cho mỗi lần truy cập vào và khám phá các blog với các liên kết sau đó mỗi lần trình duyệt để tải trang sẽ hiển thị hiệu ứng mờ dần và trang đầu tiên khi trang đã được mở trong một xuất hiện gọn gàng cho chắc chắn.

Tải Trang Blog Với Hiệu Ứng FadeIn

Hiệu ứng này mà tôi sử dụng trên blog này, các bản demo có thể được xem khi mở một trong các trang trên blog này. Mặc dù khá đơn giản nhưng để thao tác blog tải trang web. Kịch bản đang được sử dụng như dưới đây, làm thế nào để cài đặt vào Edit HTML và sau đó đưa vào các mã </body>

<script type='text/javascript'>
$(document).ready(function () {
 $('body').hide().fadeIn(5000).delay(500)
});
</script>

Kịch bản này đã có thể đi lại được. Nhưng thông thường đã xuất hiện sau khi blog của bố trí trông mới nhưng hiệu quả sẽ bắt đầu chạy. Để loại bỏ đầu tiên, có thể sử dụng body{display:none} để che giấu cơ thể trước khi kịch bản chạy.

Tải Trang Blog Với Hiệu Ứng FadeIn Và FadeOut

Đối với một này với một hiệu ứng thêm chút trên đường ra của trang (trang bên trái). Tại thời điểm chuyển đổi trang nó sẽ phát sinh hiệu lực fadeOut hoặc trang sẽ mờ dần trước khi liên kết đến trang tiếp theo. Các hoạt động của các kịch bản dưới đây là lựa chọn tất cả các liên kết trên các trang blog, như vậy có lẽ nếu trên blog có một liên kết để hiển thị một hộp thoại lightbox phương thức hoặc có thể bị xung đột và một trong những hiệu ứng không hoạt động. Để thực hiện nó vào blog giống như các bước trên, đặt nó trong mã </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 $("body").css("z-index", "-10");
 $("body").fadeIn(5000);
 $("a").click(function (event) {
 event.preventDefault();
 linkLocation = this.href;
 $("body").fadeOut(1000, redirectPage);
 });

 function redirectPage() {
 window.location = linkLocation;
 }
});
//]]>
</script>

Tuy nhiên, trước khi áp dụng trên cũng cần được đảm bảo rằng trong mẫu blog cũng đã được cài đặt jQuery, có thể sử dụng phiên bản mới nhất hoặc nó có thể là phiên bản dưới đây.

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

Trong trường hợp trước đó có một mã bạn có thể bỏ qua các mã trên bởi vì nó không cần phải cài đặt nó một lần nữa.