jquery update div background

Я пытаюсь обновить фоновое изображение на элементе тела страницы, когда я нахожу ссылки с атрибутами data-*. Он работает как шарм, но я не могу найти способ создать плавное затухание между изображениями при зависании ссылки. Вот мой код:jquery update div background

$(document).ready(function(){ 
 
\t $('.link').hover(
 
\t \t function() { 
 
\t \t \t var bg = $(this).data('fond'); 
 

 
\t \t \t // alert(bg); 
 

 
\t \t \t $('body').css("backgroundImage", 'url(' + bg + ')'); 
 
\t \t }, 
 
\t \t function() { 
 
      $('body').css("backgroundImage", 'url(http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg)'); 
 
     } 
 
\t); 
 
});

body { 
 
\t margin:0; 
 
\t background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t transition: all 1s; 
 
} 
 

 
header { 
 
\t width: 50%; 
 
\t margin: 50px auto; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
} 
 

 
nav { 
 
\t position: absolute; 
 
\t width: 50%; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%,-50%); 
 
\t text-align: center; 
 
} 
 

 
nav ul { 
 
\t padding: 50px; 
 
\t background-color: rgba(0, 0, 0, 0.95); 
 
} 
 

 
nav ul li { 
 
\t display: inline-block; 
 
\t padding: 0 20px; 
 
} 
 

 
nav ul li a { 
 
\t color: white; 
 
\t text-decoration: none; 
 
}

<header> 
 
     <h1>Hover a link, bro</h1> 
 
    </header> 
 
     <!-- Main --> 
 
     <main> 
 
      <nav class="main-nav"> 
 
      <ul> 
 
       <li data-fond ="img/belharra.jpg" class="link"><a href="#">Belharra</a></li> 
 
       <li data-fond ="img/jaws.jpg" class="link"><a href="#">Jaws</a></li> 
 
       <li data-fond ="img/mavericks.jpg" class="link"><a href="#">Mavericks</a></li> 
 
       <li data-fond ="img/nazare.jpg" class="link"><a href="#">Nazare</a></li> 
 
       <li data-fond ="img/teahupoo.jpg" class="link"><a href="#">Teahuppo</a></li> 
 
      </ul> 
 
      </nav> 
 
     </main>

Bonus: Кто-то может объяснить мне, почему я должен был использовать вторую функцию, когда мышь оставить ссылку, чтобы дать телу исходное фоновое изображение? Я думал, что метод .hover() автоматически поставить переключатель на целевом элементе ...

Метод .hover() связывает обработчики для обоих MouseEnter и MouseLeave событий. Вы можете использовать его для простого применения поведения к элементу в течение времени, в течение которого мышь находится внутри элемента.

Большое спасибо за помощь!

источник

2016-01-23 jeremy_o

Благодарим за редактирование Adam –

Я не думаю, что это можно сделать с плавным эффектом затухания.
Лучший способ достичь этого - разместить все ваши изображения в контейнере div в вашем html. Все ваши изображения должны иметь свойство opacity css равным 0. Таким образом, вы можете легко изменить свойство непрозрачности между вашими изображениями и получить эффект плавного выцветания.

источник

2016-01-23 13:34:51 smdsgn

Привет, спасибо за ваш ответ. Как вы сказали, я достиг этого, создавая новый контейнер со всеми изображениями и изменяя их непрозрачность в соответствии с зависавшими ссылками. –

Добро пожаловать @jeremy_o. Рад, что это вам поможет. – smdsgn

body { 
    margin:0; 
    background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    transition: all 1s; 
}

пожалуйста измените ссылку URL-адрес url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"); это не исправить

источник

2016-01-23 12:12:05 user5829990

Извините, что не понравилось с URL-адресом? –

вы можете попробовать свои JQuery, как это.

$('body').fadeOut(1000).css("your code").fadeIn(1000);

следующий HTML, я создал, чтобы получить idea.think это может помочь you.just копию и попробовать его.

<html> 
<head> 
<title>Welcome !</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<style type="text/css"> 
.myimage{ 
    width:500px; 
    height: 500px; 
    overflow: hidden; 
} 

.myimage img{ 
    width: 100%; 
    height: 100%; 

} 


</style> 


<body> 

    <div class="myimage"> 
    <img id="one" src="http://www.estero.co.nz/new/wp-content/uploads/2014/03/45901_new-zealand.jpg"/> 
    <img id="two" src="http://www.timeforkids.com/files/styles/tfk_rect_large/public/2011-07/nz_ss5.jpg?itok=0m-TtEYy"/> 
    </div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#one").mouseenter(function(){ 
     $(this).fadeOut(1000); 
    }); 
}); 
</script> 

</body> 
</html>

источник

2016-01-23 13:33:57

jquery update div background

ответ

Смежные вопросы