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滑動面板與鼠標移出和關閉點擊

回答

相關問題