jQuery滑动面板与鼠标移出和关闭点击

我想做一个简单的jQuery面板滑块，并让它基本上在我想要它减去两个功能。你可以看到一个版本的吧：http://jsfiddle.net/7WArj/jQuery滑动面板与鼠标移出和关闭点击

目前面板滑下，在内容和点击关闭按钮时关闭。该按钮会发生变化，因为我希望图像在关闭时打开和关闭时最终会成为按钮。

我希望添加的功能，当你不再悬停在面板上，它超时并滑入了x秒后。

我也愿意添加的功能，如果你点击关闭滑盖面板的任何地方它也将触发面板向上滑动。

我尝试了一些与.toggle()和.bind，但无法使其正常工作。菜单会随机上下滑动，等

如果有写我的代码更好的方法，以及，那将是非常赞赏。

来源

2012-08-03 tr3online

我敢肯定这是你想要的，代码注释与我所做的：

演示：http://jsfiddle.net/SO_AMK/jhYWk/

的jQuery：

jQuery(document).ready(function() { 
    jQuery("div#toppanel").attr('tabindex', -1); //Let the DIV have focus 

    jQuery("div#toppanel").blur(function(){ 
     jQuery("div#panel").animate({height: "0px"}, "fast"); // On blur, hide it 
    }); 

    timerRunning = false; 
    jQuery("div#panel").hover(function(){ //on mouse over clear a timeout if it exists 
     if (timerRunning) { 
      clearTimeout(hoverTimeout); 
      timerRunning = false; 
     } 
    }, 
    function(){ //on mouse out set the timeout 
     hoverTimeout = setTimeout(function(){ 
      jQuery("div#panel").animate({height: "0px"}, "fast"); 
     }, 2000); 
     timerRunning = true; 
    }); 

    jQuery('#toppanel').click(function(event){ 
     event.stopPropagation(); 
    }); 

    jQuery("div.panel_button").click(function(){ 
     jQuery("div#panel").focus().animate({ height: "250px" }, "fast"); 
     jQuery("div.panel_button").toggle() 
    }); 

    jQuery("div#hide_button").click(function(){ 
     jQuery("div#panel").animate({height: "0px"}, "fast"); 
    }); 
});

CSS ：

#toppanel { 
    outline: 0; /* Remove yellow outline in Chrome */ 
    z-index: 25; 
    text-align: center; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
#panel { 
    position: relative; 
    height: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 10; 
    overflow: hidden; 
    text-align: left; 
    height: 0px; 
    display: block; 
    background-color: #efefef; 
    border: 1px solid #000; 
    width: 150px; 
} 
#panel_contents { 
    height: 100%; 
    width: 603px; 
    position: absolute; 
    z-index: -1; 
} 
.the_content { 
    margin-top:40px; 
}

HTML：同

来源

2012-08-03 18:09:36

看起来正是我想要的。谢谢！ – tr3online 2012-08-03 18:20:16

看起来，按钮向下/向上状态仍然存在一些问题，根据你做什么以及你做什么，这个菜单很快就会弹出来。 – tr3online 2012-08-03 18:21:31

没问题，但是，到目前为止我在代码中发现了两个错误所以你应该检查它。附：您不需要在jQuery定义的函数中使用'jQuery'，即使您有另一个使用它的库，您也可以照常使用'$'。 – 2012-08-03 18:21:54

它工作得很好，但我发现了一个问题，如果你用“按钮按下”打开它比鼠标移开并等待它关闭=>精细。

问题，在这一点上，如果你再次打开“按钮按下”它关闭的时候了。

如果可以的话，我提出一个解决方案，关闭，同时鼠标离开这么

$("#toppanel").mouseleave(
function(event){ 
    var container = $("#panel"); 
    if (container.is(":visible")){ 
    $('#panel').delay(1800).slideUp(300);} 
});

来源

2012-09-04 22:50:35 jmayeux

jQuery滑动面板与鼠标移出和关闭点击

回答

相关问题