Плавная смена фонового изображения

303

04 августа 2017, 02:26

Есть такая разметка:

<div class="wrapper-img"></div>
<div class="wrapper-title"><a href="#" id="item1">Link</a>

Стиль:

.wrapper-img {
  background-image: url(img/bg.jpg);
}

Нужно, что бы при ховере на ссылку Link плавно(расстворением-проявлением) менялся бэкграунд у .wrapper-img. Пробовал на jquery, но кроме этого ничего в голову не пришло:

$('#item1').hover(function () {
 $('.wrapper-img').fadeOut('300', function () {
  $('.wrapper-img').css( 'background-image', 'url(img/bg2.jpg)' );
  $('.wrapper-img').fadeIn('300');
  });
 }, function () {
  $('.wrapper-img').fadeOut('300', function () {
   $('.wrapper-img').css( 'background-image', 'url(img/bg.jpg)' );
   $('.wrapper-img').fadeIn('300');
  });

});

Фон меняется, но не устраивает это перемигивание из-за fadeIn(fadeOut). Хотелось бы, что бы картинка менялась плавным появлением в растворении предыдущей. Спасибо

Answer 1

Вот простое решение:

$('.wrapper-title') 
      .mouseover(function() { 
      $('.wrapper-img-inner') 
        .css("opacity", "0") 
    }) 
    .mouseout(function() { 
      $('.wrapper-img-inner') 
        .css("opacity", "1") 
    })

.wrapper-img { 
  width: 500px; 
  height: 500px; 
  background-image: url(https://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400); 
} 
 
.wrapper-img-inner { 
  width: 500px; 
  height: 500px; 
  background-image: url(http://coolvectors.com/images/vect/2009/07/500x500.jpg); 
  transition: 1s; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div class="wrapper-title"><a href="#" id="item1">Link</a> 
<div class="wrapper-img"> 
  <div class="wrapper-img-inner"></div> 
</div>

Answer 2

 #cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}

<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" /> 
<img src="image3.jpg" alt="My image" /> 
<img src="image4.jpg" alt="My image" />     
</div>

 function cycleImages(){
          var $active = $('#cycler .active');
          var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
          $next.css('z-index',2);//move the next image up the pile
          $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
              $next.css('z-index',3).addClass('active');//make the next image the top one
          });
        }
    $(document).ready(function(){
    // run every 7s
    setInterval('cycleImages()', 7000);
    })

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как выделить первую строку по умолчанию в компоненте AgGrid?

Я делаю проект Angular 2 + AgGrid + + PrimeNGНеобходимо при заполнении компонента AgGrid данными сделать первую строку выделенной для последующей навигации...

246

javascript