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

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 匹配。