web-dev-qa-db-fra.com

Animer le changement d'image d'arrière-plan avec jQuery

Je travaille enfin maintenant, mais j'aimerais savoir comment utiliser la fonction d'animation de JQuery pour que les modifications de l'image d'arrière-plan disparaissent bien lorsque vous survolez la liste d'éléments de la page d'accueil:

http://www.thebalancedbody.ca/

Le code pour y arriver jusqu'à présent est: -

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

etc

Comment pourrais-je ajouter la fonction ANIMATE à cette s'il vous plaît - merci !!!

Merci

Jonathan

jqueryjquery-animate
29
Jonathan Lyon

Je ne pense pas que cela puisse être fait à l'aide de la fonction animate de jQuery car l'image d'arrière-plan ne possède pas les propriétés CSS nécessaires pour effectuer un tel évanouissement. jQuery ne peut utiliser que ce que le navigateur permet. (Experts jQuery, corrigez-moi si je me trompe bien sûr.)

Je suppose que vous devriez contourner ce problème en n'utilisant pas les background-images authentiques, mais les éléments div contenant l'image, positionnés à l'aide de position: absolute (ou fixed) et de z-index pour l'empilement. Vous pouvez ensuite animer ces divs.

29
Pekka 웃

en s'appuyant sur l'approche de XGreen ci-dessus, avec quelques ajustements, vous pouvez avoir un fond animé en boucle. Voir ici par exemple:

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

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

14
Ali Habibzadeh

J'ai eu le même problème, après de nombreuses recherches et Google, j'ai trouvé la solution suivante qui fonctionnait le mieux pour moi! beaucoup d'essais et d'erreurs sont allés dans celui-ci.

--- RESOLU/SOLUTION ---

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

Jetez un oeil à ce plugin jQuery de OvalPixels.

Cela peut faire l'affaire.

2
Daniel Canet

La solution la plus simple serait d'envelopper l'élément avec un div. Cette division d’emballage aurait l’image d’arrière-plan cachée qui apparaîtrait au fur et à mesure que l’élément intérieur disparaîtrait.

Voici quelques exemples javascript:

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

et voici le html qui va avec:

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

Cela peut être fait par jquery et css. je l'ai fait d'une manière qui peut être utilisée dans des situations dynamiques, il vous suffit de changer d'image de fond dans jQuery et tout sera fait, vous pouvez également modifier l'heure en css.

Le violon: 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)'
  });
});
1
Ali Naderi
$('.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, je l'ai compris, c'est assez simple avec un petit truc 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%;
}​
0
Milimetric