jQuery中slideDown()和slideUp()效果出现问题

Question

jQuery中slideDown()和slideUp()效果出现问题

3

当你悬停在相应的<li>标签上时，我希望一个特定的

具有下滑和上滑效果。您可以在此链接上实时检查：http://mashup2.sunnydsouza.com/index3.php 我使用以下jQuery来解决它：

$(".altbgcolor").mouseenter(function() {
                $(this).css("background-   color","#D3EAC7").find(".newsthumb").corner();
                $(".newstext h1",this).css("color","#000");
                $(".newstext div",this).css("color","#000"); 
                $(".sharedp").slideDown(slow);

            }).mouseleave(function () {
                $(this).css("background-color","#f5f5f5").find(".newsthumb").corner();
                $(".altbgcolor:even").css("background-color","#f0f0f0");
                $(".newstext h1",this).css("color","#666666");
                $(".newstext div",this).css("color","#666666"); 
                $(".sharedp").slideUp(slow);
            });

我做错了什么吗？有人可以检查一下网站的HTML代码，看看我哪里出了问题。我现在很为难 :(

- Sunny D'Souza

3个回答

1

将 "slow" 用引号标记起来。

$(".sharedp").slideDown('slow');

并且

$(".sharedp").slideUp('slow');

更新

为了将 slideUp/Down 限制在下一个 .sharedp 元素中使用

$(".altbgcolor").mouseenter(function() {
                $(this).css("background-color","#D3EAC7").find(".newsthumb");
                $(".newstext h1",this).css("color","#000");
                $(".newstext div",this).css("color","#000"); 
                $(this).next(".sharedp").slideDown('slow');

            }).mouseleave(function () {
                $(this).css("background-color","#f5f5f5").find(".newsthumb");
                $(".altbgcolor:even").css("background-color","#f0f0f0");
                $(".newstext h1",this).css("color","#666666");
                $(".newstext div",this).css("color","#666666"); 
                $(this).next(".sharedp").slideUp('slow');
            });

你会发现我已经删除了.corner方法，因为它似乎导致脚本悄无声息地失败了...

另外，如果你创建描述所需样式的类，并只使用jquery来添加/删除这些类，那么在速度和维护方面都会更好。

找到的一些错误

title="Traffic Exchange"" 应该只有一个结尾的"
ID 是数字的元素。只有 HTML5 允许数字 ID，否则请查看规格http://www.w3.org/TR/html4/types.html#h-6.2
重复的 ID。ID 应在文档中唯一。
<div class="newsthumb" center center no-repeat;"> 不应该有 center center no-repeat;"
您的 ul 下面有 div 元素，这是无效的。只有 li 和其他 ul 元素可以放在 ul 下面，其余应在 li 中。

总的来说，您应该努力编写有效的HTML代码。验证工具可以帮助您，例如 http://validator.w3.org/check?uri=http%3A%2F%2Fmashup2.sunnydsouza.com%2Findex3.php&charset=%28detect+automatically%29&doctype=Inline&group=1&verbose=1&user-agent=W3C_Validator%2F1.2。

- Gabriele Petrioli

只有相邻的li标签应该滑动。当你悬停在下一个li上时，它们对应的.sharedp应该向上或向下滑动。编辑：似乎不起作用:(即使我使用简单的show()或hide()。 - Sunny D'Souza

谢谢Gaby，但是还是没有显示效果。我应该最初隐藏<div class="sharedp">标签吗？ - Sunny D'Souza

jQuery 加载确实会导致显著的延迟。你说得对。但是如何在 CSS 中创建这种效果呢？ - Sunny D'Souza

@Sunny，那个页面充满了无效的HTML。错误嵌套，引用错误等等。我也因为语法错误更新了代码，所以你应该重新获取它。不过，我会这样做，http://jsfiddle.net/gaby/zzj7E/2/添加新的CSS规则和更简单的jQuery代码。 - Gabriele Petrioli

@SUnny，请给.sharedp添加margin: 5px -5px -5px -5px;。http://jsfiddle.net/gaby/zzj7E/5/ 现在我们可以结束这个问题了。主要问题已经解决。如果有新的问题，请发布新的提问。 - Gabriele Petrioli

显示剩余9条评论

1

如果那是代码的直接复制，你需要在 slideUp/down 函数中加上引号 "slow"。

- Dunhamzzz

虽然谢谢你的帮助，但是这并没有解决问题。你能否请检查一下网页的HTML代码？也许可以帮助我们排除故障。 - Sunny D'Souza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mayank · Accepted Answer

试试这个：

 $(".sharedp").slideUp("slow");.

slow应该是一个字符串