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

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

0 голосов
/ 04 июня 2011

Я пытаюсь переключить изображение background элемента (например, body) при наведении курсора на другой элемент (например, nav), имеющий какой-то переход плавного перехода между двумя изображениями с помощью jQuery.

Я читал похожие вопросы в stackoverflow и попробовал почти каждый пример без особой удачи.

Ресурсы

  • index.html
  • styles.css
  • scripts.js
  • background.png
  • фон-hover.png

Отрывки

index.html 

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

styles.css 

body {
    background: url('background.jpg') no-repeat;
}

scripts.js 

$('nav')
    .mouseenter(function(){
        $('body').css("background", "url('background-hover.jpg') no-repeat");
    })
    .mouseleave(function(){
        $('body').css("background", "url('background.jpg') no-repeat");
    });

Любой совет будет принят с благодарностью. Большое спасибо заранее.

Ответы [ 3 ]

2 голосов
/ 04 июня 2011

Если вы хотите плавного перехода между фонами, это нельзя сделать, просто изменив background-image с одного на другой.Вам нужно будет по крайней мере создать еще один элемент, который вы можете постепенно исчезать.Например, вот так: 

var d = $('<div />').width($('body').width())
    .height($(window).height())
    .attr('id','fakebody').hide().appendTo($('body'));

$('nav').hover(function(){
     $(d).fadeIn();
},function(){
     $(d).fadeOut();   
});

#fakebody{
    position:absolute;
    top:0;
    left:0;
background:    url(background.jpg);
        z-index:-99;
}

Пример: http://jsfiddle.net/niklasvh/bXMKJ/

Если вы хотите, чтобы текущее изображение постепенно исчезало, а другое исчезало, вам понадобится 2 фиктивных элементапотому что вы не можете скрыть body (по крайней мере, с ожидаемыми результатами).

Если вы просто хотите, чтобы background-image менялся с одного на другой, вы можете исправить свой код с помощьюудаление ; в конце функции мыши, например, так: 

$('nav').mouseenter(function(){
        $('body').css("background", "url('background-hover.jpg') no-repeat");
    }).mouseleave(function(){
        $('body').css("background", "url('background.jpg') no-repeat");
    });

Пример: http://jsfiddle.net/niklasvh/sC5rd/

0 голосов
/ 04 июня 2011

Сценарии 

$(document).ready(function(){
    $('nav').mouseenter(function(){
           $('body').css("background", "url('background-hover.jpg') no-repeat");
    });
    $('nav').mouseleave(function(){
           $('body').css("background", "url('background.jpg') no-repeat");
    });

});

Стиль: 

nav {
    border:1px green solid;
    width:150px;
}
body {
    background-image:url(background.jpg);
    background-repeat:no-repeat;
}

Это работает, но если вы хотите постепенно увеличивать и уменьшать его, вы должны использовать другой элемент, такой как "div".

0 голосов
/ 04 июня 2011

Разве это не должно быть ... 

$('nav').mouseenter(function(){
        $('body').css("background", "url('background-hover.jpg') no-repeat");
    });
$('nav').mouseleave(function(){
        $('body').css("background", "url('background.jpg') no-repeat");
    });

Обратите внимание на дополнительную привязку события элемента nav.

...