当前位置:首页 > 编程教程 > jQuery技术文章 > jquery使用slideDown实现模块缓慢拉出效果的方法

详细介绍jquery使用slideDown实现模块缓慢拉出效果的方法技巧

  • 发布时间:
  • 作者:码农之家
  • 点击:103

这篇文章主要知识点是关于jquery、slideDown、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

jquery使用slideDown实现模块缓慢拉出效果的方法

本文实例讲述了jquery使用slideDown实现模块缓慢拉出效果的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码通过按钮控制指定的区域缓慢拉出显示的效果

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown("slow");
 });
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.776499

jQuery中slidedown与slideup实例用法

这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法。分享给大家供大家参考,具体如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlhead title/title style type=text/css *{font-size:12px;} div{width:600px;margin:auto;} #control{background-color:gold;padding:10px;margin-bottom:10px;} /style script src=../js/jquery-1.5.1.min.js type=text/javascript/script script type=text/javascript $(function () { $(#btnslideDown).click(function () { $(#message).slideDown(1000); }); $(#btnslideUp).click(function () { $(#message).slideUp(1000); }); //*****举例1 // $(#btnToggle).click(function () { // $(#message).slideToggle(1000); // }); //*****举例2 动画函数都可以传递回调函数,即动画执行完毕后会执行这个函数 $(#btnToggle).click(function () { $(#message).slideToggle(1000, function () { alert(我执行完毕了!); }); }); });……

网友NO.381892

jQuery 滑动方法slideDown向下滑动元素

jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果。 jQuery 拥有以下滑动方法: slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换。 jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素。 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 ……

网友NO.547178

jQuery动画效果-slideUp slideDown上下滑动示例代码

[code] html head meta charset="utf-8"/ style *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding:5px; cursor:pointer;} .content{ text-indent:15px;} /style script type="text/javascript" src="script/jquery-1.4.2.min.js"/script script $(function(){ $("h5.head").hover(function(){ $("div.content").slideUp(3000); },function(){ $("div.content").slideDown(3000); }); }) /script /head body div id="container" h5 class="head"什么是jQuery?/h5 div class="content" JQuery是继prototype原型之后又一个javascript库,他凭借简单的代码和完善的浏览器兼容性,再加上强大的DOM操作,完善的事件处理机制,强大的ajax操作,加大的简化了javascript开发人员的工作。 /div /div /body /html [/code]……

网友NO.643577

jQuery中slideUp 和 slideDown 的点击事件

先贴代码,再讲详细事件 复制代码 代码如下: !DOCTYPE html html head meta charset="utf-8" title/title script src="js/jquery.js"/script /head style type="text/css" div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } /style body div class="panel" pW3School - 领先的 Web 技术教程站点/p p在 W3School,你可以找到你所需要的所有网站建设教程。/p /div p class="flip"请点击这里/p script type="text/javascript" $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp(300); }); }); /script /body /html 重点(Tips): 1、click 事件 按钮的选择 在这个断码中是 “.flip” 2、节点的选择 在这段代码中是 “.panel” 再贴一段代码 复制代码 代码如下: script type="text/javascript" $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle(300); }); }); /script .slideToggle 事件 将这个滑……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com