Javascript 不是预期的'；效果'；使用jquery时显示/隐藏

当我尝试将show/hide与mouseover和mouseout一起使用时，出现了意想不到的效果和一些其他错误

我想做的是有一个盒子（div），当你将鼠标移到上面时，另一个盒子会出现并向右滑动

这是小提琴

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

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

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

---

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

使用CSS3转换怎么样

---

请参见：

改用CSS3转换如何

---

看到了吗：

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

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

---

像这样的事？使用将为您提供从默认左侧开始的幻灯片效果

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

---

主要问题是，在容器的不同子元素上移动会触发

鼠标出

和

鼠标出

组合，这就是为什么您会看到元素展开和折叠的原因。IE通过

mouseenter

和

mouseleave

事件绕过了这一点，它们的行为与CSS

：hover

完全相同

说到这里，jQuery函数也有这个特性。您应该使用它，而不是

mouseover

和

mouseout

根据API，您应该使用效果来获得您想要的

---

您的最终代码应该如下所示：

主要问题是，移动到容器的不同子元素上会触发一个

mouseout

和

mouseover

组合，这就是您看到元素展开和折叠的原因。IE通过

mouseenter

和

mouseleave

事件绕过了这一点，它们的行为与CSS

：hover

完全相同

说到这里，jQuery函数也有这个特性。您应该使用它，而不是

mouseover

和

mouseout

根据API，您应该使用效果来获得您想要的

您的最终代码应该如下所示：

有几件事：

如果您想进行淡入淡出，这会更好：

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

});

​ 此外，您可能应该将div

.item\u body

浮动到左侧

演示：

有几件事：

如果您想进行淡入淡出，这会更好：

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

});

​ 此外，您可能应该将div

.item\u body

浮动到左侧

---

演示：

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

看看这把小提琴，更好地了解如何使用更有效的语法：

---

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

看看这把小提琴，更好地了解如何使用更有效的语法：

---

我做了一些很快的东西，你可以用它疯狂：）动画非常流畅，我希望它对你有用

---

我做了一些很快的东西，你可以用它疯狂：）动画非常流畅，我希望它对你有用

---

那太好了。这正是我要找的！它在fiddle中工作得很好，但由于某种原因，我在将它插入到自己的文件时出错了？未捕获SyntaxError:chrome开发工具的意外标记非法。我已经看了一遍又一遍，但是找不到它说的这个令牌。当然看到了，哈哈。谢谢我甚至找不到导致错误的空白，但我慢慢地重新键入，一步一步地测试，现在它工作了。这很完美。这正是我要找的！它在fiddle中工作得很好，但由于某种原因，我在将它插入到自己的文件时出错了？未捕获SyntaxError:chrome开发工具的意外标记非法。我已经看了一遍又一遍，但是找不到它说的这个令牌。当然看到了，哈哈。谢谢我甚至找不到导致错误的空白，但我慢慢地重新键入，一步一步地测试，现在它工作了。