Анимировать изменение фонового изображения с помощью jQuery - PullRequest
Новая
       13

Анимировать изменение фонового изображения с помощью jQuery

30 голосов
/ 06 июня 2010

Теперь у меня наконец-то все работает, но я хотел бы знать, как я могу использовать функцию анимации 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 - спасибо !!!

Спасибо

Jonathan

Ответы [ 9 ]

30 голосов
/ 06 июня 2010

Я не думаю, что это можно сделать с помощью функции animate в jQuery, поскольку фоновое изображение не имеет необходимых свойств CSS для такого замирания. JQuery может использовать только то, что делает возможным браузер. (Эксперты jQuery, поправьте меня, если я, конечно, не прав.)

Полагаю, вам придется обойти эту проблему, не используя подлинные background-image s, а div элементы, содержащие изображение, расположенные с использованием position: absolute (или fixed) и z-index для стекирования. Затем вы бы оживили эти div s.

17 голосов
/ 31 мая 2013

построение на основе подхода 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);

});
15 голосов
/ 06 июня 2010 
<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>

11 голосов
/ 20 августа 2014

У меня была та же проблема, после множества исследований и поиска в Google, я обнаружил, что следующее решение работает лучше всего для меня! множество проб и ошибок пошло на это.

--- РЕШЕНО / РЕШЕНИЕ ---

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;
}
2 голосов
/ 03 сентября 2016

Это можно сделать с помощью jquery и css. я сделал это таким образом, чтобы его можно было использовать в динамических ситуациях, вам просто нужно изменить background-image в 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)'
  });
});
2 голосов
/ 15 мая 2011

Взгляните на этот jQuery плагин от OvalPixels.

Это может помочь.

1 голос
/ 13 июня 2013

Самое простое решение - обернуть элемент 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>
0 голосов
/ 21 сентября 2017 
$('.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 голосов
/ 15 июня 2012

Хорошо, я понял, это довольно просто с небольшим трюком 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%;
}​
...