Question

Hóla大家......

所以，我创建了一个在click事件中调用的jQuery函数，就像这样...

function biocontent(){
  var first = $(this).data('first'),
      last = $(this).data('last'),
      bio = $(this).data('bio'),
      img = $(this).data('image');
  $('#background').css('background-image','url('+img+')');
  $('#about-content article').html(bio);
  $('#first-name').html(first);
  $('#last-name').html(last);
}

点击事件就是这样......

$('.item').click(biocontent);

我需要的是#background的当前背景图片淡出点击以及$('#background').css('background-image','url('+img+')');中调用的新图像淡入。无论如何，我能做到吗？< / p>

编辑 - 在此请求所有HTML

<section id="about">

<div id="background"></div><!-- / #background -->

<div class="content-container"> 

<h2 class="title"><span>About</span> the Film</h2><!-- / .title -->

<nav id="about-nav">

<a href="#" class="about" data-about="Wintons Motion Pictures brings you a new, hard-hitting documentary film by Jesse Winton. TARGETED will be examining one of the key issues of the day, gun control, and will take you on a fast-paced journey, following 19 year-old director Jesse Winton as he travels across the world, and goes back to the historical roots of the gun-control agenda, exposing it, and bringing out the dark truth behind gun control. TARGETED will creatively answer the increasingly tough questions regarding the issue, as well as giving us a plan that will help to mobilize freedom-loving Americans to defend the rights and liberties that have been granted to us. Coming 2014." data-image="../img/about-background.jpg">Synopsis</a>

<h5 class="crew-title">Crew</h5><!-- / .crew-title -->
<ul id="crew-list">

  <li class="jesse" data-first="Jesse" data-last="Winton" data-bio="JESSE WINTON (Director/Writer) began making documentaries in 2010, and co-directed the award-winning 2011 film RESCUED: THE HEART OF ADOPTION AND CARING FOR ORPHANS. He is a partner in Wintons Motion Pictures, the production company behind Targeted, whose activities encompass feature film development and production. Jesse has spent years studying the work of his film hero, Steven Spielberg, learning the art of visual storytelling and screenwriting. Targeted is his second feature-length documentary." data-image="../img/crew/jesse-winton-background.jpg">
    <a href="#">Jesse Winton</a>
  </li>

  <li class="randy" data-first="Randy" data-last="Winton" data-bio="RANDY WINTON (Producer/Executive Producer) began producing professionaly in 2010, starting with the award-winning documentary Rescued: The Heart of Adoption & Caring for Orphans. Mr. Winton is a partner in Wintons Motion Pictures, the production company behind Targeted, whose activities encompass feature film development and production. Randy spent years as a small business owner before beginning to produce feature films." data-image="../img/about-background.jpg">
    <a href="#">Randy Winton</a>
  </li>

  <li class="matt" data-first="Matt" data-last="Blick" data-bio="MATT BLICK is an awesome person when you pretend he doesn't exist." data-image="../img/crew/matt-blick-background.jpg">
    <a href="#">Matt Blick</a>
  </li>

</ul><!-- / #crew-list -->
</nav><!-- / #abou-nav -->

<div class="top-mask"></div><!-- / .top-mask -->

<article id="about-content" class="content">

<h4 id="first-name"></h4><!-- / .first-name -->
<h3 id="last-name"></h3><!-- / .last-name -->

<article> 
</article>   

</article><!-- / #about-content -->

<div class="bottom-mask"></div><!-- / .bottom-mask -->

</div><!-- / .content-container -->

</section><!-- / #about -->

全部谢谢！

Answer 1

您可以使用CSS在许多浏览器中设置背景过渡动画。看看这个小提琴我做了一个例子：http://jsfiddle.net/npVa8/

这里的关键属性是

[browser-prefix]-transition: background-image 1s linear;

但是，如果兼容性至关重要，那么这就不可能了。

背景图像之间的褪色

1 个答案: