jQuery的向下滑动只有不可见

我使用Jquery一个简单的问题。 我想显示在菜单标题的详细信息,但界面​​不是那么顺利。 尝试一些东西出来几个小时之后,我回来开始,看看是否有一个简单的答案

看下面这个例子

两个问题:

  1. 如果将鼠标悬停几大类一次得到你想要的类别,动画仍然可以通过其他所有的动画,而不是停止其他的,只有动画鼠标目前悬停在一个运行。
  2. 如果将鼠标放在某个类别已经打开,它仍然运行动画,但我只希望动画运行,如果内容不可见。 有一个简单的,如果可以做到这一点说法?

--------------解决方案-------------

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
var $content = $(this).next('.content');
$content.stop(1, 1).slideToggle(400);
});

http://jsfiddle.net/elclanrs/GBkMB/1/

编辑:

为了防止内容滑动备份可以嵌套div就像这样:

<div class="fruit">fruit
<div class="content fruit_types">apple<br/>bannana<br/>orange</div>
</div>
<div class="vegetable">vegetable
<div class="content vegetable_types">celery<br/>lettuce<br/>cucumber</div>
</div>
<div class="dairy">dairy
<div class="content dairy_types">milk<br/>cheese<br/>butter</div>
</div>

JQ:

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
var $content = $(this).children('.content'); //<-`children()` not `next()`
$content.stop(1,1).slideToggle(400);

});

例如:http://jsfiddle.net/elclanrs/GBkMB/5/

我已经编辑您的提琴现在这个样子。 应该给你你想要前进什么的想法:

http://jsfiddle.net/GBkMB/4/

$("body").on("hover", ".fruit, .vegetable, .dairy", function(event){
if(event.relatedTarget != $(this).next(".content")[0]){
if(event.type == "mouseenter"){
$('.content').slideUp('slow');
$('.'+$(this).attr("class")+'_types').slideDown('slow');
}else if(event.type == "mouseleave"){
$('.content').slideUp('slow');
}
}
});
$("body").on("mouseleave", ".content", function(event){
if(event.relatedTarget != $(this).prev("div")[0]){
$(this).slideUp('slow');
}
});

或:http://jsfiddle.net/GBkMB/6/ @elclanrs答案++

$('.content').on("mouseleave", function(event){
if(event.relatedTarget != $(this).prev("div")[0]){
$(this).slideUp('slow');
}
});
var $elms = $('.fruit, .vegetable, .dairy');
$elms.on("hover", function(event) {
var $content = $(this).next('.content');
if(event.relatedTarget != $content[0]){
$content.stop(1,1).slideToggle(400);
}
});

分类:JavaScript的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.659 (s). 10 q(s)