MouseOver 事件上的淡出滚动条
我使用 jquery 隐藏和显示 mouseout&over 事件上的滚动条。现在我想将 fadeOut 和 fadeIn 过渡应用于该任务。滚动是正常淡出的，但是包含内容的整个 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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
代码中的这些行使滚动条出现和消失。
Jquery 调用是级联的，因此您对 fadeOut 的调用将使 div fadeOut。
如果你想淡出滚动条，那么你必须实现一个自定义滚动条（就像在facebook上一样）
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)
这是不可能的。
淡入淡出的工作原理是逐渐调整元素的不透明度。滚动条本身不是一个元素，因此无法定位它或调整其不透明度。它要么打开（溢出：自动），要么关闭（溢出：无）。
话虽如此，您可以完全禁用真正的滚动条并使用 jScrollPane 插件来替换它。
然后，您可以在 jScrollPane 创建的 div.jspVerticalBar 上使用
fadeIn()和fadeOut()函数。http://jscrollpane.kelvinluck.com/
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()andfadeOut()functions on the div.jspVerticalBar created by jScrollPane.http://jscrollpane.kelvinluck.com/