`

jquery 动画 效果 显示

 
阅读更多

Jqury 1.4API文档见附件

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery 动画效果</title>
<script type="text/javascript" src="jquery1-6-1.js"></script>
<script>
$(document).ready(function(){

   // 隐藏与显示的切换
    $("button").click(function(){
        $("#test").toggle(2000);
    });
    
    // 上下滑动的切换
    $("#wo").click(function(){
        $("#head").slideToggle(2000);
    });
});

</script>
</head>
<body>
<p style="display:none;">
$(selector).hide(speed,callback) // 隐藏<br />
$(selector).show(speed,callback) // 显示<br />
speed参数可以设置这些值： slow,fast,normal 或 milliseconds<br />

// 切换与滑动<br />
$(selector).toggle(speed.callback) // 切换功能<br />
toggle()函数使用show()或hide()函数来切换html元素，同一个按钮可以点击两次，<br />
实现隐藏和显示的效果<br />

$(selector).slideDown(speed,callback) // 向下滑动，并显示隐藏<br />
$(selector).slideUp(speed,callback)   // 向上滑动，并隐藏遮挡<br />
$(selector).siideToggle(speed,callback) // 上下滑动，实现切换<br />

// 淡入淡出和动画<br />
$(selector).fadeOut(speed,callback)     //变淡至空<br />
$(selector).fadeIn(speed,callback)      //变亮至全部<br />
$(selector).fadeTo(speed,opacity,callback)  // 变淡至制定效果，亮度值用0.0 -1.0之间<br />

$(selector).animate({params},duration,easing,callback) // 动画<br />
           变化后的css效果，变化速度用毫秒，变化效果的名称，实现动画后调用的函数<br />
 </p>          
 <div id="test" style="background:yellow;width:300px;height:300px;"></div>    
 <button type="button">按钮</button>   
 
 <div id="mydiv" style="width:800px; height:80px; background:red;">
     <div id="head" style="width:800px; height:50px; background:green;">这里是我的内容，有是会出现有时不会出现</div>
     <div id="foot" style="width:800px; height:30px;"><a style="cursor:pointer;" id="wo">点击我试试</a></div>
 </div>
</body>
</html>
分享到：
| 利用JAVA API发送E-mail
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics