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]

赞 (0)

相关推荐

  • jQuery学习笔记之jQuery动画效果

    基本动画代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Hello World jQuery!</title><script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type=&quo

  • jQuery动画效果-fadeIn fadeOut淡入浅出示例代码

    复制代码 代码如下: <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; c

  • jquery实现图片列表鼠标移入微动

    本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti

  • jQuery动画出现连续触发、滞后反复执行的解决方法

    本文实例讲述了jQuery动画出现连续触发.滞后反复执行的解决方法.分享给大家供大家参考.具体分析如下: jQuery中slideUp .slideDown.animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅. 则解决办法: 1.在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout) 2.在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop) jquery sto

  • jQuery动画animate方法使用介绍

    复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin

  • JQuery动画animate的stop方法使用详解

    animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css

  • jQuery动画特效实例教程

    jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法.分享给大家供大家参考之用.具体方法如下: 1.自制折叠内容块 内容块如下: <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this mo

  • JQuery动画和停止动画实例代码

    JQuery动画和停止动画实例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码

  • 利用jquery动画特效和css打造的侧边弹出垂直导航

    利用jquery动画特效和css打造的侧边弹出垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:

随机推荐