CODEWITHSUNDEEP
jqueryscrollbarfadeout
Rama Rao M
Rama Rao M

Reputation: 3051

FadeOut Scrollbar on MouseOver Event

I am hiding and showing scroll bar on mouseout&over events using jquery. Now am I want to apply fadeOut and fadeIn transitions to that task. Scrolling is fadeOut properly, but the entire div tag with content is hidden after fadeOut.Can you please tell me how to achieve my task....(I m not sure abt my code is right).

Here is my Code...

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

Upvotes: 0

Views: 2396

Answers (2)

user166560
user166560

Reputation:

This can't be done.

Fading works by gradually adjusting the opacity on an element. The scrollbar isn't an element itself, so it can't be targeted or have the opacity adjusted. It's either on (overflow:auto) or off (overflow:none).

Having said that, you could disable the real scrollbar entirely and use the jScrollPane plugin to replace it.

Then you could use the fadeIn() and fadeOut() functions on the div.jspVerticalBar created by jScrollPane.

http://jscrollpane.kelvinluck.com/

Upvotes: 1

hope_is_grim
hope_is_grim

Reputation: 1934

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

these lines from your code make the scrollbar appear and disappear.
Jquery call is cascaded so your call of fadeOut will make the div fadeOut.
If you want to fadeOut the scrollbar, so you must implement a custom scrollbar (like on facebook)

Upvotes: 2

Related Questions