Блог

В настоящее время я в тупике и надеюсь, что смогу получить некоторую помощь. Я работаю над проектом, в котором клиент хочет, чтобы фоновое изображение исчезало при нажатии на значок.

Вы можете увидеть фрагмент, на который я ссылаюсь: http://209.142.68.153/#work-showcase

Например, если кто-то нажмет на второй значок, основной фон над ним исчезнет в этом фрагменте работы.

Любая помощь будет оценена.

Хотя перекрестные затухания обычно выглядят лучше всего, это обычно связано с такими сложностями, как использование контейнерного div с его позицией, установленной в relative, а затем двух дочерних divs, установленных в: (позиция: абсолютная; сверху: 0; слева: 0;).

Вместо этого вы можете исчезать, используя непрозрачность, затем по завершении измените изображение и снова исчезните.

 $('.gallery a').click(function() {
  var linkElement = $(this);
  $('.work-header').animate({opacity:0}, 1000, function() {
    // <li id="filename1"> ... </li>
    var filename = linkElement.closest('li').attr('id');
    $('.work-header').css('background-image', 'url(path/to/'   filename   '.jpg)');

    // You will highly likely want to implement an "onLoad" for
    // the image above because it will start fading back in
    // whether or not the image has finished loading.
    $('.work-header').animate({opacity:1}, 1000);
  });
});