不是使用 jquery 显示/隐藏时的预期“效果”

not the expected 'effect' when using jquery show/hide

本文关键字：效果 隐藏 jquery 显示      更新时间：2023-09-26

我在尝试使用鼠标悬停和鼠标悬停时显示/隐藏时遇到了意想不到的效果和其他一些错误。

我想做的是有一个框（div），当你将鼠标悬停在它上面时，会出现另一个框并向右滑动。

这是它的小提琴http://jsfiddle.net/XtXGR/

现在有两个问题。一个是闪烁，另一个是它从左上角生长而出现，我希望它做的是从左边出现。

任何帮助将不胜感激。谢谢

我想我知道是什么原因导致类似问题的闪烁，但我仍然需要另一个问题的帮助。谢谢！

哦，也只是为了让您知道使用它的上下文是在带有项目表的页面上，每个项目都是我上面发布的小提琴链接中的对象。

主要问题是，在容器的不同子元素上移动将触发mouseout和mouseover的组合，这就是您看到元素扩展和折叠的原因。IE通过mouseenter和mouseleave事件规避了这一点，它们的行为与CSS :hover完全相同。

说到这里，jQuery hover函数也有这个功能。您应该使用它而不是 mouseover 和 mouseout .

根据show API，您应该使用slide效果来获得所需的内容。

最终代码应如下所示：http://jsfiddle.net/XtXGR/28/

几件事：

如果你想做一个淡入/淡出，这会更好：

$(document).ready(function(){
    $("div.item_container").hover(function() {
         $("div.item_body").fadeIn(500);
    }, function() {
         $("div.item_body").fadeOut(500);
    });
});

另外，您可能应该将div .item_body浮动到左侧。

演示：http://jsfiddle.net/lucuma/XtXGR/33/

改用 CSS3 过渡怎么样？

看到这个： http://jsfiddle.net/EVDj6/2/

像这样的东西？ 使用幻灯片将为您提供默认左边的幻灯片效果。

$(document).ready(function(){
    $("div.item_container").on('hover',function(){
        $("div.item_body").toggle('slide',500);
    });
});​

http://jsfiddle.net/XtXGR/25/

您的代码中存在许多问题。 href 无效，元素的浮动不是 100% 正确的。 其中一个主要问题是你的CSS中有display：none。 将 dispay：none 从 CSS 中取出，并将其内联到您要显示/隐藏的项目上。 当其默认状态为"隐藏"时，您需要使显示：none内联。

看看这个小提琴，以更好地了解如何使用更有效的语法来解决这个问题：http://jsfiddle.net/fH3EC/1/

我做了一些快速的东西，你可以发疯:)动画非常流畅，希望对您有用。

http://jsfiddle.net/XtXGR/50/

相关文章：