jQuery：动画标题

Question

我正在寻找一个可以帮助我解决以下问题的 jQuery 插件：

我有一个我想用于我的标题的图像列表，但它们非常大（尤其是高度），我不想调整它们的大小以适合我的小标题 div。

我想要的是一个 插件， 允许图像从 div 的底部开始（或者更确切地说是 div 顶部的图像顶部）并向上移动，因此可以看到整个图像，一旦它们完全显示（div 底部的图像底部），它们应该与下一个图像“混合”（不透明度切换或类似的东西），从而创建一个包含所有图像的连续循环。

我浏览了几个插件，但从来没有找到一个可以实现我正在寻找的东西（也许我要求太多了）但是我的 JS 不足以自己构建它.

谢谢！

编辑：根据alexteg的帖子，我决定走另一个方向，即：

            $('#header_img img').hide();
            $('#header_img img').each(function(i) {
                $(this).show().animate({
                    opacity: 1.0,
                    marginTop: '-=' + ($(this).height() - $('#header_img').height())
                }, 5000, function() {
                    $(this).animate({
                        opacity: 0.0
                    }, 1000).hide();
                });
            });

现在我遇到的唯一问题是第一个图像触发，一旦完成它就会触发第二个，但它也会立即触发下一个，而不是等待整个动画完成。

现在我知道我可以用动画回调来做到这一点，但我不知道如何将它与我正在做的每一个结合起来循环我的图像。 理想情况下，它还会继续循环（第一张图片在最后一张之后再循环等等），所以如果有人有任何想法，不胜感激！

Answer 1

Cycle plugin 可以很好地进行混合。如果您希望为第一张图像设置动画，您可以使用 .animate()-function 和激活循环插件的回调。您可能需要隐藏除第一个动画之外的所有图像，然后显示它们并激活循环插件。

对于循环插件，您需要像这样放置图像：

<div id="header"> 
    <img src="images/header_1.jpg" width="900" height="250" /> 
    <img src="images/header_2.jpg" width="900" height="250" /> 
    <img src="images/header_3.jpg" width="900" height="250" /> 
</div>

然后您可以执行以下操作：

$(document).ready(function(){
  $('#header img').hide();
  $('#header').animate({
    opacity: 1.0,
    marginTop: '-=250',
  }, 5000, function() {
    $('#header').cycle({
      fx:   'fade',
      speed:    3000,
      timeout:  7000
    });
  });
});

然后您还需要初始 CSS，例如：

#header {
    height: 250px;
    overflow: hidden;
}

#header img:first-child {
    margin-top: 250px;
}

当然，您需要根据需要调整所有名称、大小、速度等。

Answer 2

我喜欢循环，但我认为这个可能更适合作为标题：

来自 Dev7 的 Nivo 滑块 http://nivo.dev7studios.com/

但是使用 alexteg 中的 CSS，您也可以查看剪辑

http://www.w3schools.com/CSS/pr_pos_clip.asp