Tôi muốn thay đổi hình nền bằng hình ảnh động chậm, nhưng nó không làm việcLàm cách nào để thay đổi hình nền bằng hoạt ảnh jQuery?
$('body').stop().animate({background:'url(1.jpg)'},'slow');
Có điều gì sai với cú pháp !!
Bạn có thể nhận được hiệu ứng tương tự bằng cách làm mờ độ mờ của hình ảnh thành 0, sau đó thay đổi hình nền và cuối cùng làm mờ ảnh trở lại.
Điều này sẽ yêu cầu div, đằng sau mọi thứ khác trên trang của bạn rộng bằng nội dung.
<body>
<div id="bg"></div>
...
</body>
Bạn có thể làm cho nó rộng như các trang sử dụng CSS:
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Và sau đó động thuộc tính của nó.
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});
Bạn có thể nhận được nhiều hơn một hiệu ứng chéo, bằng việc có một div nền thứ hai trên thế này, mà sau đó bạn có thể phai nhạt trong.
Thao tác này sẽ hoạt động, ngoại trừ việc nó sẽ làm động độ mờ của tất cả nội dung của 'body'. Tôi không chắc đó là những gì OP là sau. – user113716
của bạn một thiên tài !! – getaway
@patrick của khóa học, cũng không có cách nào tôi biết (không có một plugin) để animate opacity nền, do đó, có lẽ một số HTML thêm là cần thiết để có được hiệu ứng này? –
Từ các tài liệu jQuery:
tính năng mà không phải số không thể được hoạt hình sử dụng cơ bản chức năng jQuery . (Ví dụ, chiều rộng, chiều cao, hoặc trái có thể được hoạt hình nhưng background-color không thể được.)
Nguồn:
Bạn không thể animate thêm/thay thế của một hình nền. URL có ở đó hay không. Không có ở giữa trạng thái.
Cách để đạt được điều này có thể là onclick thêm lớp mới với hình ảnh nền. Sau đó, hãy tạo ảnh động này? Hoặc làm mờ hình ảnh để hiển thị hình ảnh mới?
bạn có thể cho tôi xem một ví dụ hay không, im quá đi! – getaway
http://stackoverflow.com/questions/253689/switching-div-background-image-with-jquery Tôi đang ở trên iPhone nên rất khó. Nhưng một số câu trả lời ở đây có thể giúp bạn. – diagonalbatman
Tôi sẽ sử dụng một div giả để trang trải các nền là một yếu tố cố định và sau đó sinh động rằng yếu tố tức là:
<div id="bgDiv" style='display:none;background:URL("Water lilies.jpg");position:fixed; width: 100%; height: 100%; z-index: -1'></div>
<script type="text/javascript">
$(document).ready(function(){
$('#bgDiv').toggle(1000); //You can plugin animate function here.
});
</script>
Sau đây là cách tôi đã làm nó:
$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
không là gì đi làm? Tốc độ hay bất kỳ tốc độ nào? –
bây giờ hình ảnh không xuất hiện !! khi tôi nhấp vào sự kiện chức năng !! – getaway