用jQueryanimation改变背景图片
我现在终于有这个工作，但想知道如何使用JQuery的animationfunction，使您的鼠标hover在主页上的列表项时，使背景图像变化很好地淡入淡出： –
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_V1http://img.dovov.comnutrition_background.jpg)'); },function () { $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1http://img.dovov.comdefault_background.jpg)'); } ); $("ul#frontpage li#297 a").hover( function () { $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1http://img.dovov.comvibration_training.jpg)'); },function () { $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1http://img.dovov.comdefault_background.jpg)'); } ); 等等
我将如何添加animationfunction，请 – 谢谢！
谢谢
乔纳森
我不认为这可以使用jQuery的animatefunction，因为背景图像没有必要的CSS属性来做这样的淡出。 jQuery只能使用浏览器使之成为可能。 （jQuery专家，纠正我，如果我错了，当然。）
我想你必须通过不使用真正的background-image来解决这个问题，但是包含图像的div元素使用position: absolute （或者fixed ）和z-index进行堆叠。 你会然后animation这些div 。
build立在XGreen的方法上面，有一些调整，你可以有一个animation循环背景。 看这里例如：
$(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); });
<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_V1http://img.dovov.comnutrition_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_V1http://img.dovov.comdefault_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>
我有同样的问题，经过大量的研究和谷歌search，我发现以下解决scheme最适合我！ 大量的试验和错误进入这一个。
—求解/解决scheme—
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; }
看看这个来自OvalPixels的jQuery插件 。
它可能会诀窍。
最简单的解决scheme是用div来包装元素。 这个包装div会隐藏背景图像，会出现内部元素消失。
这里有一些例子javascript：
$('#wrapper').hover(function(event){ $('#inner').fadeOut(300); }, function(event){ $('#inner').fadeIn(300); });
这里是html一起去的：
<div id="wrapper"><div id="inner">Your inner text</div></div>
我想你应该看看这里
我正在寻找同样的事情
看演示
好吧，我想通了，这是很简单的一个小技巧：
HTML
<body> <div id="background">. </div> <p>hello world</p> <p>hello world</p> <p>hello world</p> <p>hello world</p> </body>
JavaScript的
$(document).ready(function(){ $('#background').animate({ opacity: 1 }, 3000); });
CSS
#background { background-image: url("http://media.noupe.com//uploads/2009/10/wallpaper-pattern.jpg"); opacity: 0; margin: 0; padding: 0; z-index: -1; position: absolute; width: 100%; height: 100%; }
我发现的唯一的解决scheme不是用jQuery，而是css3。
我希望你喜欢它。
请参阅第6个演示： http : //css3.bradshawenterprises.com/cfimg/
它可以通过jQuery和CSS来完成。 我做了一个可以在dynamic情况下使用它，你只需要改变jQuery中的背景图像，它会做的一切，也可以改变在CSS的时间。
小提琴： https ： //jsfiddle.net/Naderial/zohfvqz7/
HTML：
<div class="test">
CSS：
.test { /* as default, we set a background-image , but it is not nessesary */ background-image: url(http://lorempixel.com/400/200); width: 200px; height: 200px; /* we set transition to 'all' properies - but you can use it just for background image either - by default the time is set to 1 second, you can change it yourself*/ transition: linear all 1s; /* if you don't use delay , background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time OR more , so there won't be any problems */ -webkit-transition-delay: 1s;/* Safari */ transition-delay: 1s; }
JS：
$('.test').click(function() { //you can use all properties : background-color - background-image ... $(this).css({ 'background-image': 'url(http://lorempixel.com/400/200)' }); });
$('.clickable').hover(function(){ $('.selector').stop(true,true).fadeTo( 400 , 0.0, function() { $('.selector').css('background-image',"url('assets/img/pic2.jpg')"); }); $('.selector').fadeTo( 400 , 1); }, function(){ $('.selector').stop(false,true).fadeTo( 400 , 0.0, function() { $('.selector').css('background-image',"url('assets/img/pic.jpg')"); }); $('.selector').fadeTo( 400 , 1); } );
