javascript - 带有图像和文本的淡入、淡出 div(使用 jquery)

Question

我想做的是允许用户点击作品集主页上摄影师的照片；然后，他们将获得有关摄影师的信息。完成后，他们可以单击“返回”，然后返回到portfolioMain。

它曾经工作得很好，但我在脚本或 html 中的某个地方搞砸了。所以现在当我点击返回时，摄影师的信息仍然显示并且不会淡出。谁能看到我可能做错了什么？

Answer 1

看来是因为你一开始没有正确初始化文档状态。否则，您的代码似乎工作正常(至少使用 jQuery 1.6.4)。

这是工作中的 jsFiddle，通过在 $(document).ready() 开头调用反向链接功能来正确设置状态的“快速破解”:http://jsfiddle.net/RFra9/1/

显然，它“闪烁”的方式并不理想，因此您需要确保 HTML 最初渲染时隐藏了正确的元素(将其 style 属性设置为 display: none; )，然后删除对 $(document).ready() 的 backToMain() 调用。

这有道理吗？如果没有请告诉我。

哦，当你在那里时 - 从技术上讲， <br> 应该是 <br /> ，并且所有 <img> 标签也应该是自动关闭的( <img ... /> ) - Vanessa 的标签不是。

编辑:好的，在查看页面后，除了所有损坏的图像路径(主要是由于文件名中缺少 .)，我认为 .portfolioDetail:visible div 的问题没有消失正确输出是由于您使用了 float 。现在，我不是 float 专家，但通过将 <div style="clear: both;"> 添加到每个 PortfolioDetail div 的末尾，我确实获得了所需的行为，例如:

<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn"> 
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p> 
<p><a href="http://www.williamchik.com" target="_blank">www.williamchik.com</a></p>
<br>
<p><a href="#" class="back">Back</a></p>
</div>
<div style="clear:both;"></div> /* here */
</div>

我不确定您使用的是哪个CSS框架，因为可能有一种方法可以确保使用特殊类或其他东西清除 float ，但需要手动添加div(以及重新绑定(bind)$(',back')功能，我不确定为什么这对我的更改不起作用)确实为我修复了它。

这有帮助吗？尝试修复图像路径并在您链接到的测试站点上添加清除 div，我会看看它是否仍然不起作用。