Fatal编程技术网
  • jquery/
  • 使用jQuery设置背景图像更改动画

使用jQuery设置背景图像更改动画

jquery

使用jQuery设置背景图像更改动画,jquery,jquery-animate,Jquery,Jquery Animate,我现在终于可以工作了，但我想知道，当您将鼠标悬停在主页上的列表项上时，如何使用JQuery的动画功能使背景图像的更改很好地淡入淡出：- 到目前为止，实现这一点的代码是：- $("ul#frontpage li#277 a").hover( function() { $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/ba

我现在终于可以工作了，但我想知道，当您将鼠标悬停在主页上的列表项上时，如何使用JQuery的动画功能使背景图像的更改很好地淡入淡出：-

到目前为止，实现这一点的代码是：-

$("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

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

我想您必须解决这个问题，不要使用正版
背景图像
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>


#主页_outter{位置：相对；宽度：100%；高度：100%；}
#主页内部{位置：绝对；顶部：0；左侧：0；z索引：10；宽度：100%；高度：100%；}
#主页\参考底图{位置：绝对；顶部：0；左侧：0；z索引：9；宽度：800px；高度：500px；显示：无；}
$（函数（）{
$（'a'）。悬停（函数（）{
$（“#主页"参考底图”）.fadeOut（'slow'，function（）{
$（“#主页"参考底图”）.css（{“背景图像”：“url（”http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg")' });
$（“#主页"参考底图”）.fadeIn（'slow'）；
});
}，函数（）{
$（“#主页"参考底图”）.fadeOut（'slow'，function（）{
$（“#主页"参考底图”）.css（{“背景图像”：“url（”http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg")' });
$（“#主页"参考底图”）.fadeIn（'slow'）；
});
});
});

从卵形像素看一下这个

它可能会起作用。

好吧，我想出来了，这是一个非常简单的html小技巧：

HTML

CSS

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

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

您的内部文本
我也遇到了同样的问题，经过大量的研究和谷歌搜索，我发现下面的解决方案对我最有效！这次经历了大量的尝试和错误

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

JS

它可以通过jquery和css来完成。我是以一种可以在动态环境中使用的方式来做的，您只需在jquery中更改背景图像，它就能完成所有事情，您还可以在css中更改时间

小提琴：

Html:

JS:

因此，如果背景图像是一个大图像（像一个精灵），我可以使用Anmiate？@Jonathan-是的，通过设置
背景位置的动画，比如：@Nick good link@Jonathan我的意思更倾向于让两个
div
s在彼此下面，然后淡出或淡入其中一个。（如果你想淡入淡出的图像。）动画方法当然更容易。该链接+1。我不久前开始使用这个插件，现在我可以为背景图像设置动画了请看我最新的bg动画之一：我正在制作这幅图像的动画：嗨，伙计们，我已经创建了一幅大图像，可以通过使用第二个列表项的背景位置：0px-600px，然后是背景位置：0px-1200px来移动；对于第三个列表项，等等，但是我不能在javascript中使用每个列表项的悬停事件来激活和移动homepage_容器的背景图像，有什么想法吗？这是bg图像这是解决方案的链接

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



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

});



$('#wrapper').hover(function(event){
    $('#inner').fadeOut(300);
}, function(event){
    $('#inner').fadeIn(300);
});



<div id="wrapper"><div id="inner">Your inner text</div></div>



$(document).ready(function() {
            $("header").delay(5000).queue(function(){
                $(this).css({"background-image":"url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"});
            });
        });



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



<div class="test">



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



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

);