单击“投资组合”图标时，背景图像淡入淡出

Question

我目前很难过，希望能得到一些帮助。我正在开发一个项目，客户希望在点击图标时背景图像会消失。

你可以在http://209.142.68.153/#work-showcase

看到我所指的那篇文章

例如，如果有人点击第二个图标，则其上方的主要背景会淡入到该工作中。

任何帮助都将不胜感激。

Answer 1

虽然交叉淡入淡出通常看起来最好，但通常涉及使用容器div并将其位置设置为相对的复杂性，然后将两个子div设置为:( position：absolute; top：0; left：0;）。< / p>

相反，您可以使用不透明度淡化，然后在完成后更改图像并淡入淡出。

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