1.JavaScript客户端框架--JQuery开发入门2.ppt

script src=///ajax/libs/jquery/1.8.3/jquery.min.js/script script type=text/javascript $(document).ready(function(){ $(.flip).click(function(){ $(.panel).slideUp(slow); }); }); /script 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 /html body div class=panel p领先的 Web 技术教程站点/p p你可以找到你所需要的所有网站建设教程。/p /div p class=flip请点击这里/p /body 3） jQuery slideToggle() 方法 jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 如果元素向下滑动，则 slideToggle() 可向上滑动它们。 如果元素向上滑动，则 slideToggle() 可向下滑动它们。 $(selector).slideToggle(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 script src=///ajax/libs/jquery/1.8.3/jquery.min.js/script script type=text/javascript $(document).ready(function(){ $(.flip).click(function(){ $(.panel).slideToggle(slow); }); }); /script 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; display:none; } /style body div class=panel p领先的 Web 技术教程站点/p p你可以找到你所需要的所有网站建设教程。/p /div p class=flip请点击这里/p /body 2. jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 !DOCTYPE html html head script src=///ajax/libs/jquery/1.8.3/jquery.min.js /script script $(document).ready(function(){ $(button).click(function(){ $(div).animate({left:250px}); }); }); /script /head body button开始动画/button p默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。/p div style=background:#98bf21;height:100px;width:100px;position:absolute; /div /body /html 1） jQuery animate() - 操作多个属性 请注意，生成动画的过程中可同时使用多个属性： 实例 $(button).click(function(){ $(div).animate({ left:250px, opacity:0.5, height:150px, widt