Полоса прокрутки FadeOut на событии MouseOver - PullRequest
Новая
       7

Полоса прокрутки FadeOut на событии MouseOver

0 голосов
/ 15 февраля 2012

Я скрываю и показываю полосу прокрутки на событиях mouseout и over, используя jquery. Теперь я хочу применить переходы fadeOut и fadeIn к этой задаче. Прокрутка выполняется fadeOut правильно, но весь тег div с содержимым скрывается после fadeOut. Можете ли вы сказать мне, как выполнить мою задачу .... (Я не уверен, что мой код верен).

Вот мой код ... 

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

Ответы [ 2 ]

1 голос
/ 15 февраля 2012

Это не может быть сделано.

Затухание работает путем постепенной регулировки непрозрачности элемента. Полоса прокрутки не является самим элементом, поэтому она не может быть нацелена или иметь непрозрачность. Он либо включен (переполнение: авто), либо выключен (переполнение: нет).

Сказав это, вы можете полностью отключить реальную полосу прокрутки и использовать плагин jScrollPane для ее замены.

Тогда вы можете использовать функции fadeIn() и fadeOut() в div.jspVerticalBar, созданном jScrollPane.

http://jscrollpane.kelvinluck.com/

1 голос
/ 15 февраля 2012 
$(this).css({"overflow":"auto"})
$(this).css({"overflow":"hidden"})

эти строки в вашем коде заставляют полосу прокрутки появляться и исчезать.
Вызов Jquery является каскадным, поэтому ваш вызов fadeOut сделает div fadeOut.
Если вы хотите fadeOut полосы прокрутки, так что вы должныреализовать собственную полосу прокрутки (как на фейсбуке)

...