Question

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

我试图做的是有一个盒子（div），当你将鼠标放在它上面时，会出现另一个盒子并向右滑动。

现在有两个问题。一个是闪烁，另一个是从左上角开始出现，我希望它从左边出现。

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

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

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

Answer 1

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

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

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

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

Answer 2

一些事情：

如果你想做一个fadein / out，这会更好：

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

Answer 3

如何使用CSS3转换呢？

请参阅：http://jsfiddle.net/EVDj6/2/

Answer 4

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

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

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

Answer 5

您的代码中存在许多问题。 href是无效的，元素的浮动不是100％正确。其中一个主要问题是你在CSS中显示：none。带来那个dispay：没有出来和CSS，并将它内联在你想要显示/隐藏的项目上。当它的默认状态是“隐藏”时，你需要带上display：none inline。

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

Answer 6

我做得很快，你可以疯狂吧:)动画很流畅，我希望它对你有用。

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

使用jquery show / hide时不是预期的“效果”

6 个答案: