Animation 新手-ie7和jquery.animate（）-滑动字幕

我正试着制作一些滑动字幕，类似于，但更轻。在所有主流浏览器中，一切看起来都很好（即使在ie8中看起来很慢），但在ie7中什么也没有发生。 我正在用进行测试，我不知道bug是来自软件还是来自我的代码。 我相信你会有一些提示来帮助我改进它

无论如何，谢谢你

HTML:

JS:

---

您的HTML代码无效。

a

元素是一个内联元素，它不能包含像

div

这样的块元素。浏览器处理错误标记的方式不同，可能会重新排列或忽略某些标记以创建有效的元素

将内联元素放入链接中，以便正确解析它们，然后可以使用CSS将它们转换为块元素：

<div class="imgbox">
 <img src="#" />
 <a href="#" class="caption">
 <spap class="details">
 <span class="h6">Lorem ipsum</span>
 <span class="p">Lorem ipsum dolor sit amet,…</span>
 </span>
 </a>
</div>

---

CSS代码中也有一些漏洞，这些漏洞可能不会在IE7中得到很好的解决。您可以注释掉其中的一些，以测试它们是否会导致问题。

我发现它来自标题的位置。我设置了一个顶部位置，但没有定义任何左侧或右侧位置。 这段代码现在出现在ie7上：

.caption{
 display:block;
 position:absolute;
 top:104px;
 left:0;
 height:100%;
 width:100%;

但在ie8和ie7上仍然非常慢。

---

不管怎样，问题解决了

嗨，谢谢你@Guffa我试过你说的，但ie7没有改变任何事情。有没有更好的方法制作简单的幻灯片字幕？我也只尝试了css，没有任何转换：'.imgbox:hover>.caption{top:0；}'，但在ie7中什么都没有发生。

$(".imgbox").hover(
    function() 
    {$(this).children('.caption').animate({top:0},"fast");},
    function() 
    {$(this).children('.caption').animate({top:104},"fast");}
 );

<div class="imgbox">
 <img src="#" />
 <a href="#" class="caption">
 <spap class="details">
 <span class="h6">Lorem ipsum</span>
 <span class="p">Lorem ipsum dolor sit amet,…</span>
 </span>
 </a>
</div>

.imgbox a, .imgbox .details, .imgbox .h6, .imgbox .p { display: block; }

.caption{
 display:block;
 position:absolute;
 top:104px;
 left:0;
 height:100%;
 width:100%;