Анимировать изменение фонового изображения с помощью 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)');
     }
    );

и т.д.

Как бы добавить функцию ANIMATE к этому, пожалуйста, спасибо!!!

Спасибо

Джонатан

Ответы

Ответ 1

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

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

Ответ 2

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

});

Ответ 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>

Ответ 4

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

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

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

Ответ 5

Посмотрите на этот плагин jQuery из OvalPixels.

Это может сделать трюк.

Ответ 6

Простейшим решением было бы обернуть элемент 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>

Ответ 7

Я думаю, вы должны посмотреть здесь
Я ищу то же самое
См. Демонстрацию

Ответ 8

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

Ответ 9

Единственное решение, которое я нашел, это не с JQuery, а css3.

Надеюсь, вам понравится.

См. 6-й ДЕМО: http://css3.bradshawenterprises.com/cfimg/

Ответ 10

Это можно сделать с помощью 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)'
  });
});

Ответ 11

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

);