jQuery动画效果
总结：
向右滑动的效果出不来，跟文档一模一样的也出不来，我明天再试试把。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1, .d2, .d3, .d4{
width:100px; height:100px; background-color:#ffe411;
}
.box1{
width: 100px; height:100px; background: red;
}
button{
margin-bottom: 10px; border:none; width:100px;
}
.main{
width:150px; height:200px; float:left;
}
</style>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
// jQuery显示/隐藏
// hide() 隐藏显示的元素
// $(selector).hide(speed,callback)
// speed 元素隐藏的速度，默认为零
// callback hide函数执行后，要执行的函数
// show() 显示隐藏的元素
// $(selector).show(speed, callback)
// speed 元素显示的速度，默认为零
// callback show函数执行后，要执行的函数
// $(document).ready(function(){
// $('#btn1').click(function(){
// $('p').hide(1500);
// })
// $('#btn2').click(function(){
// $('p').show(1500);
// })
// })
// jQuery滑动
// jQuery是通过高度的变化 (向某个方向增大或缩小)来动态的显示所匹配的元素
// slideDown(speed， callback)通过高度的变化，向下增大的动态效果 下滑效果
// speed: 下滑显示过程的速度 英文值或者毫秒
// callback： 动画完成时执行的函数
// slideUp(speed, callback) 通过高度的变化，向上减小的动态效果 上滑效果
// speed：上滑显示过程的速度 英文值或者毫秒
// callback：动画完成时执行的函数
// slideToggle(speed, callback); 通过高度的变化来切换元素的可见性
// speed：上滑隐藏/下滑显示过程的速度 英文值或者毫秒
// callback： 动画完成时执行的函数
// $(document).ready(function(){
// $('.d1').hide();
// $('.btn1').click(function(){
// $('.d1').slideDown(1500);
// })
// $('.btn2').click(function(){
// $('.d2').slideUp(1500)
// })
// $('.btn3').click(function(){
// $('.d3').slideToggle(1000);
// })
// })
// jQuery 淡入 淡出
// fadeIn(speed, callback) 通过不透明度的变化来实现匹配到元素的淡入效果
// fadeOut(speed, callback) 通过不透明度的变化来实现匹配到元素的淡出效果
// fadeToggle(speed, callback)
// 通过不透明度的变化来开关所有匹配到元素的淡入淡出效果
// fadeTo(speed, opacity, callback)把所有匹配到的元素的不透明度以渐进的方式调整到指定的不透明度
// speed：规定效果的时长
// callback：动画完成时执行的函数
// opacity： fadeTo方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
// $(document).ready(function(){
// $('.d1').hide();
// $('.btn1').click(function(){
// $('.d1').fadeIn(1500);
// })
// $('.btn2').click(function(){
// $('.d2').fadeOut(1500);
// }) //少打一个点 .
// $('.btn3').click(function(){
// $('.d3').fadeToggle(1500);
// })
// $('.btn4').click(function(){
// $('.d4').fadeTo(1500, 0.1);
// })
// })
// jQuery自定义动画
// 使用 animate()方法创建自定义动画
// 语法：$(selector).animate({params}, speed, callback);
// 必需的 params 参数定义形成动画的 CSS 属性
// 可选的 speed 参数规定效果的时长， 可取："slow"、"fast"、"nomal" 或 毫秒
// 可选的 callback 是动画完成后所执行的函数
// stop() 方法用于停止动画或效果，在它们完成之前 该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
// 语法：$(selector).stop(stopAll, goToEnd);
// 可选的参数 stopAll 规定是否应该清除动画队列。 默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行
// 可选的参数 goToEnd 规定是否立即完成当前动画。默认是 false
// 默认情况下 stop() 会清楚再被选元素上指定的当前动画
$(document).ready(function(){
// $('.btn1').click(function(){
// $('p').animate({fontSize:'40px'}, 1500);
// })
// $('.btn2').click(function(){
// $("div").animate({left:"100px"}, 1500);
// $('div').animate({
// left:'400px', //left 谷歌浏览器测试不能实现
// opacity: '0.3',
// width:'400px',
// height:'400px'
// width:'toggle'
// }, 1500);
// })
$('#right').click(function(){
$('.box1').animate({left:'500px'}, 3000);//还是实现不了，我醉了。
$('.box1').animate({fontSize:'30px'}, 500);//这个就可以实现，我也是福
})
$('#stop').click(function(){
$('.box1').stop(true, true);
})
})
</script>
</head>
<body>
<!-- <button id="btn1">点击隐藏</button>
<button id="btn2">点击显示</button>
<p>我是wjh,xxoo</p>
<p>me love you</p> -->
<!-- <button class="btn1">下滑</button>
<div class="d1"></div>
<button class="btn2">上滑</button>
<div class="d2"></div>
<button class="btn3">切换</button>
<div class="d3"></div> -->
<!-- <div class="main">
<button class="btn1">淡入</button>
<div class="d1"></div>
</div>
<div class="main">
<button class="btn2">淡出</button>
<div class="d2"></div>
</div>
<div class="main">
<button class="btn3">切换</button>
<div class="d3"></div>
</div>
<div class="main">
<button class="btn4">渐变到指定值</button>
<div class="d4"></div>
</div> -->
<!-- <button class="btn1">点击</button>
<p>我是一个小可爱，我来自神都洛阳。</p>
<button class="btn2">点击</button>
<div></div> -->
<div>
<button id="right">右移</button>
<button id="sopt">停止</button>
<div class="box1">php中文网</div>
</div>
</body>
</html>