Анимационное изменение фонового изображения с jQuery
Я наконец имею эту работу теперь, но хотел бы знать, как я могу использовать анимационную функцию JQuery для внесения изменений фонового изображения, постепенно появляются приятно, когда Вы нависаете над элементами списка на домашней странице:-
http://www.thebalancedbody.ca/
Код, чтобы заставить это произойти до сих пор является:-
$("ul#frontpage li#277 a").hover(
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg)');
},
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
}
);
$("ul#frontpage li#297 a").hover(
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/vibration_training.jpg)');
},
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
}
);
и т.д. и т.д.
Как был бы я добавлять АНИМАЦИОННУЮ функцию к этому - Спасибо!!!
Спасибо
Jonathan
2 ответа
Я не думаю, что это можно сделать с помощью функции jQuery animate потому что фоновое изображение не имеет необходимых свойств CSS для такого затухания. jQuery может использовать только то, что позволяет браузер. (Эксперты jQuery, поправьте меня, если я ошибаюсь, конечно.)
Думаю, вам придется обойти это, не используя подлинные background-image s, а div элементы, содержащие изображение, расположенные с использованием position: absolute (или fixed ) и z-index для наложения. Затем вы должны анимировать эти div s.
<style type="text/css">
#homepage_outter { position:relative; width:100%; height:100%;}
#homepage_inner { position:absolute; top:0; left:0; z-index:10; width:100%; height:100%;}
#homepage_underlay { position:absolute; top:0; left:0; z-index:9; width:800px; height:500px; display:none;}
</style>
<script type="text/javascript">
$(function () {
$('a').hover(function () {
$('#homepage_underlay').fadeOut('slow', function () {
$('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg")' });
$('#homepage_underlay').fadeIn('slow');
});
}, function () {
$('#homepage_underlay').fadeOut('slow', function () {
$('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg")' });
$('#homepage_underlay').fadeIn('slow');
});
});
});
</script>
<body>
<div id="homepage_outter">
<div id="homepage_inner">
<a href="#" id="run">run</a>
</div>
<div id="homepage_underlay"></div>
</div>