使用 jQuery 动画背景图像更改答案

【问题标题】：Animate background image change with jQuery使用 jQuery 动画背景图像更改
【发布时间】：2011-02-28 08:43:09
【问题描述】：

我现在终于有了这个工作，但想知道当您将鼠标悬停在主页上的列表项上时，如何使用 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 功能 - 谢谢！！！

谢谢

乔纳森

【问题讨论】：

这里是解决方案的链接Link to Solution - set css with fade in and delay

标签： jquery jquery-animate

【解决方案1】：

我不认为这可以使用 jQuery 的 animate 函数来完成，因为背景图像没有必要的 CSS 属性来进行这种褪色。 jQuery 只能利用浏览器使之成为可能。（jQuery 专家，如果我错了，请纠正我。）

我猜你必须通过不使用真正的background-images 来解决这个问题，而是使用包含图像的div 元素，使用position: absolute（或fixed）和z-index 进行堆叠定位。然后，您将为这些 divs 设置动画。

【讨论】：

因此，如果背景图像是一张大图像（如精灵），我可以使用 Anmiate 为该精灵的移动/重新定位设置动画？
@Jonathan - 是的，通过动画background-positon，像这样：snook.ca/technical/jquery-bg
@Nick 好链接！ @Jonathan 我的意思更倾向于将两个divs 放在一起，并将其中一个淡出或淡入。（如果您要淡化图像。）动画方法当然更简单。
该链接+1。我前段时间开始使用那个插件，它让我现在可以为背景图像设置动画！ :) 在这里查看我最新的 bg 动画之一：mashinaizec.com 我正在为这张图片制作动画：mashinaizec.com/css/images/nav_background.png
大家好，我已经创建了一个大图像，可以通过使用 background-position:0px -600px 来移动第二个列表项，然后使用 background-position:0px -1200px;对于第三个列表项等，但我无法在 javascript 中使用每个列表项的悬停事件来触发和移动 homepage_container 的背景图像 - 有什么想法吗？这是bg图片thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/…

【解决方案2】：

在上述 XGreen 方法的基础上，通过一些调整，您可以拥有动画循环背景。例如，请参见此处：

http://jsfiddle.net/srd76/36/

$(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);

});

【讨论】：

【解决方案3】：

<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>

【讨论】：

【解决方案4】：

我遇到了同样的问题，经过大量研究和谷歌搜索，我发现以下解决方案最适合我！在这个过程中进行了大量的试验和错误。

--- 已解决/解决方案 ---

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;
}

【讨论】：

【解决方案5】：

可以通过jquery和css来完成。我这样做的方式可以在动态情况下使用，您只需在 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)'
  });
});

【讨论】：

【解决方案6】：

看看这个来自 OvalPixels 的jQuery plugin。

它可能会成功。

【讨论】：

【解决方案7】：

最简单的解决方案是用 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>

【讨论】：

【解决方案8】：

好的，我想通了，这很简单，只需一点 html 技巧：

http://jsfiddle.net/kRjrn/8/

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%;
}

【讨论】：

【解决方案9】：

$('.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);
}

);

【讨论】：