如何将与幻灯片图像相同的过渡效果应用于其标题

Question

我在一些图像上使用JQuery Cycle，并使它们完美地工作，然而，我不喜欢它们附带的字幕的变化方式，它们与我的图像渐变形成鲜明对比。

我想把同样的过渡效果应用到他们的字幕上。你知道怎么做吗？

我相信这很简单，但对我来说不是。我已经包含了插件，我的设置在js中。这是一把小提琴。。。http://jsfiddle.net/NQE8b/

此外，图像在加载时出现跳跃问题，因此需要处理另一个问题。

Answer 1

为什么不将字幕与幻灯片放在同一个div中？这就是为什么你会出现矛盾。有几种方法可以解决这个问题，但我会用列表来解决。

所以试试这个：

   <div id="images_caption">
   <ul id="slideshow" class="pics">
   <li><img src=http://www.cressidahaughton.co.uk/blackout%202jan31.jpg alt=""/>
   <br />TITLE 1<br />medium<br />size<br />date</li>
   <li><img src=http://www.cressidahaughton.co.uk/blackout%201jan31.jpg alt=""/>
   <br />TITLE 2<br />medium<br />size<br />date</li>
   <li><img src=http://www.cressidahaughton.co.uk/blackout4jan31.jpg alt=""/>
   <br />TITLE 3<br />medium<br />size<br />date</li>
   </ul>       
   </div>

只要确保你的div和/div匹配即可。