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

Question

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

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

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

现在有两个问题。一个是闪烁，另一个是它从左上角增长出现，我想要它做的是从左边出现。

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

我想我知道是什么导致了类似问题的闪烁，但我仍然需要其他问题的帮助。谢谢！

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

score 4 · Accepted Answer

主要问题是移到容器的不同子元素上会触发 a mouseoutandmouseover组合，这就是为什么您会看到元素展开和折叠的原因。IE 使用mouseenter和mouseleave事件规避了这一点，其行为与 CSS 完全相同:hover。

说起来，jQueryhover函数也有这个特性。您应该使用它而不是mouseoverand mouseout。

根据showAPI，你应该使用slide效果来获得你想要的。

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

score 1 · Accepted Answer

几件事：

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

$(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/

score 0 · Accepted Answer

0

改用 CSS3 过渡效果如何？

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

于 2012-06-12T14:53:55.560 回答

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

您的代码中有很多问题。href 无效，并且元素的浮动不是 100% 正确的。主要问题之一是您的 CSS 中有 display:none。将 dispay:none 从 CSS 中取出，并将其内嵌在要显示/隐藏的项目上。当其默认状态为“隐藏”时，您需要将 display:none 内联。

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

score 0 · Accepted Answer

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

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

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

6 回答 6

Related

Reference