Animer le changement d'image de fond avec jQuery

Question

Animer le changement d'image de fond avec jQuery

J'ai enfin cela fonctionne maintenant mais je voudrais savoir comment je peux utiliser la fonction animate de JQuery pour que les changements d'image d'arrière-plan se fanent bien lorsque vous survolez les éléments de la liste sur 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 etc

Comment pourrais-je ajouter la fonction ANIMATE à ceci svp-merci!!!

Merci

Jonathan

29

jquery jquery-animate

demandé sur Narendra Jadhav 2010-06-06 15:05:32

9 réponses

score 29 · Answer 1

Je ne pense pas que cela puisse être fait en utilisant la fonction animate de jQuery car l'image d'arrière-plan n'a pas les propriétés CSS nécessaires pour faire un tel fondu. jQuery ne peut utiliser que ce que le navigateur rend possible. (experts jQuery, corrigez-moi si je me trompe bien sûr.)

Je suppose que vous devriez contourner cela en n'utilisant pas les background-imageauthentiques, mais les div éléments contenant l'image, positionnés en utilisant position: absolute (ou fixed) et z-index pour l'empilement. Vous animeriez alors ces divs.

score 16 · Answer 2

En S'appuyant sur L'approche de XGreen ci-dessus, avec quelques réglages, vous pouvez avoir un arrière-plan en boucle animé. 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);

});

score 14 · Answer 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>

score 10 · Answer 4

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

--- RÉSOLU / 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;
}

score 2 · Answer 5

Jetez un oeil à ce jQuery plugin {[2] } de OvalPixels.

, Il peut faire l'affaire.

2

répondu Daniel Canet 2011-05-15 18:58:41

score 1 · Answer 6

La solution la plus simple serait d'envelopper l'élément avec un div. Cette div d'emballage aurait l'image d'arrière-plan cachée qui apparaîtrait à mesure que l'élément interne s'estompe.

Voici un exemple de javascript:

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

Et voici le html pour aller avec:

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

score 0 · Answer 7

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

score 0 · Answer 8

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 l'image de fond dans jquery et il fera tout , vous pouvez également changer 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)'
  });
});

score 0 · Answer 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);
}

);

Las etiquetas más populares

Animer le changement d'image de fond avec jQuery

9 réponses