php动画效果,jQuery动画效果

摘要：总结：向右滑动的效果出不来，跟文档一模一样的也出不来，我明天再试试把。代码：

// 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);

})

})

右移

停止

php中文网

批改老师：查无此人批改时间：2019-02-15 09:17:59

老师总结：效果都是事件触发，看看事件写的对不对。。刚开始学习，会碰到很多问题，比如一个字母打错，也会不执行。仔细检查，继续加油。