Question

我正在使用jquery隐藏并在mouseout＆amp; over事件上显示滚动条。现在我想将fadeOut和fadeIn过渡应用于该任务。滚动是正确的fadeOut，但是fadeOut之后隐藏了包含内容的整个div标签。您可以告诉我如何实现我的任务....（我不确定我的代码是否正确）。

这是我的代码......

<!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>

Answer 1

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

代码中的这些行使滚动条显示和消失 Jquery调用是级联的，所以你的fadeOut调用会使div fadeOut 如果你想fadeOut滚动条，那么你必须实现一个自定义滚动条（如在Facebook上）

Answer 2

这不可能。

渐变的作用是逐渐调整元素的不透明度。滚动条本身不是元素，因此无法定位或调整不透明度。它是打开（溢出：自动）或关闭（溢出：无）。

话虽如此，您可以完全禁用真正的滚动条并使用jScrollPane插件替换它。

然后你可以使用jScrollPane创建的div.jspVerticalBar上的fadeIn()和fadeOut()函数。

http://jscrollpane.kelvinluck.com/

MouseOver事件上的FadeOut滚动条

2 个答案: