Jon*_*yon 31 jquery jquery-animate
我现在终于有了这个工作,但想知道当你将鼠标悬停在主页上的列表项时,我可以如何使用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)');
}
);
等等
我该如何添加ANIMATE功能呢 - 谢谢!
谢谢
乔纳森
Pek*_*ica 31
我不认为这可以使用jQuery的animate功能来完成,因为背景图像没有必要的CSS属性来进行这种淡化.jQuery只能利用浏览器的功能.(jQuery专家,如果我当然错了,请纠正我.)
我猜你不得不通过不使用真正的background-images 来解决这个问题,但是div包含图像的元素,使用position: absolute(或fixed)定位并z-index用于堆叠.然后你会为那些divs 制作动画.
Jam*_*mes 17
基于XGreen的上述方法,通过一些调整,您可以获得动画循环背景.在这里看到例如:
$(document).ready(function(){
var images = Array("http://placekitten.com/500/200",
"http://placekitten.com/499/200",
"http://placekitten.com/501/200",
"http://placekitten.com/500/199");
var currimg = 0;
function loadimg(){
$('#background').animate({ opacity: 1 }, 500,function(){
//finished animating, minifade out and fade new back in
$('#background').animate({ opacity: 0.7 }, 100,function(){
currimg++;
if(currimg > images.length-1){
currimg=0;
}
var newimage = images[currimg];
//swap out bg src
$('#background').css("background-image", "url("+newimage+")");
//animate fully back in
$('#background').animate({ opacity: 1 }, 400,function(){
//set timer for next
setTimeout(loadimg,5000);
});
});
});
}
setTimeout(loadimg,5000);
});
Ali*_*deh 15
<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>
Bra*_*her 11
我有同样的问题,经过大量的研究和谷歌搜索,我发现以下解决方案最适合我!这个问题充满了反复试验.
---已解决/解决方案---
JS
$(document).ready(function() {
$("header").delay(5000).queue(function(){
$(this).css({"background-image":"url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"});
});
});
CSS
header {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
transition:all 1s ease-in;
}
| 归档时间： |
|
| 查看次数： |
115373 次 |
| 最近记录： |