web-dev-qa-db-ja.com

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

などなど

これにどのようにアニメーション機能を追加しますか-ありがとう!!!

ありがとう

ジョナサン

jqueryjquery-animate
30
Jonathan Lyon

背景画像にはこのようなフェードを行うために必要なCSSプロパティがないため、jQueryのanimate関数を使用してこれを行うことはできないと思います。 jQueryは、ブラウザが可能にするもののみを利用できます。 （jQueryの専門家、私がもちろん間違っているなら私を修正してください。）

真のbackground-imagesではなく、スタックにposition: absolute（またはdiv）とz-indexを使用して配置された画像を含むfixed要素を使用して、この問題を回避する必要があると思います。次に、それらのdivsをアニメーション化します。

30
Pekka 웃

上記の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);

});
17
James
<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>
15
Ali Habibzadeh

私は同じ問題を抱えていました。多くの研究とグーグルで調べた後、次の解決策が私にとって最適であることがわかりました！たくさんの試行錯誤がこれに入りました。

---解決済み/解決策---

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;
}
11
Brad Fletcher

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)'
  });
});
3
Ali Naderi

これをご覧ください jQuery plugin OvalPixelsから。

それはトリックをするかもしれません。

2
Daniel Canet

最も簡単な解決策は、要素を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>
1
Jason
$('.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);
}

);
0
tolkodelo

OK

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