2012-02-15 87 views
0

我隱藏並顯示滾動條上的鼠標移出&使用jQuery的事件。現在我想將fadeOut和fadeIn轉換應用到該任務。滾動是fadeOut正常,但整個具有內容的div標籤在fadeOut後隱藏。可以請告訴我如何完成我的任務....(我不確定我的代碼是否正確)。FadeOut MouseOver上的滾動條事件

這裏是我的代碼...

<!DOCTYPE HTML> 
<html> 
<head> 
    <title> New Document </title> 
    <meta name="Generator" content="EditPlus"> 
    <meta name="Author" content=""> 
    <meta name="Keywords" content=""> 
    <meta name="Description" content=""> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $('div').mouseover(function(){ 
     $(this).css({"overflow":"auto"}).fadeIn(); 
     }); 
    $('div').mouseout(function(){ 
     $(this).css({"overflow":"hidden"}).fadeOut(); 
     }); 

    }); 
    </script> 
    <style> 
    div{ 
    width:200px; 
    height:200px; 
    overflow:hidden; 
    border:2px solid red; 
    } 
    </style> 
</head> 

<body> 
    <div> 
    This is the recommended version of jQuery to use for your application. The code in here should be stable and usable in all modern browsers. 

The minified versions, while having a larger file size than the packed versions (note: packed version is not available in current release), are generally the best versions to use on production deployments. The packed versions require non-trivial client-side processing time to uncompress (unpack) the code whereas the minified versions do not. The packed versions of jQuery will take less time to download than the minified or uncompressed versions; however, each time the library is loaded (initially or from the browser cache) it will need to be uncompressed which will cause a non-trivial delay in the execution of any jQuery code each time it is loaded. 
    </div> 

</body> 
</html> 

回答

1
$(this).css({"overflow":"auto"}) 
$(this).css({"overflow":"hidden"}) 

從這些代碼使滾動條出現和消失。
Jquery調用是級聯的,所以您的fadeOut調用將使div div fadeOut。
如果你想淡出滾動條,所以你必須實現自定義滾動條(如在facebook上)

1

這是不能做到的。

衰落通過逐漸調整元素上的不透明度而起作用。滾動條本身不是一個元素,所以它不能被作爲目標或調整不透明度。它可以是(溢出:自動)或關閉(溢出:無)。儘管如此,您可以完全禁用真正的滾動條,並使用jScrollPane插件來替換它。

那麼你可以使用由JScrollPane中創建的div.jspVerticalBar的fadeIn()和​​功能。

http://jscrollpane.kelvinluck.com/