JQuery中的动画元素

来源：互联网发布：sql平均值函数编辑：程序博客网时间：2024/05/18 01:18

自己把jquery的视屏学习完了，发现有一个重要的地方竟然没有学习，感觉JQuery的动画部分是很实用的，至少在很多网站都可以看到，可以大大提高用户的体验。

这里只说一下今天学的动画元素。

1首先是元素的显示和隐藏：

/*$("#a_click").click(function(){$(".p_1").hide(800);//隐藏元素，都是越小越快});*//*$("#a_click").click(function(){$(".p_1").show(800);//显示元素});*//*$("#a_click").mouseover(function(){$(".p_1").toggle(800);//自动的切换show和hide的方法});*/

2：是透明度的变化：

/*$("#a_click").click(function(){$(".p_1").fadeIn(2000);//透明度从0变成1之内渐变出来});*//*$("#a_click").click(function() {$(".p_1").fadeOut(5000);//0.5秒从1你变为0});*//*$("#a_click").click(function() {$(".p_1").fadeTo(2000,.5,function(){window.alert("你好啊");});//0.5秒从1你变为0,透明度变化的长度});*//*$("#a_click").click(function(){$(".p_1").fadeToggle('15000', function() {//window.alert("huu");});});*/

3：是上下的来回滚动：

$("#a_click").click(function(){//点击上下来回的滚动$(".p_1").slideDown('1200', function() {});});

4：自定义动画：（用的很多）

$('#run').click(function(){$(".div_1").animate({'top':'400px'},3000).animate({'left':'500px'},3000).animate({'top':'50px'},3000).animate({'left':'50px'},3000);});$("#stop").click(function(){$(".div_1").stop(true,false);});$("#dequeue").click(function(){$(".div_1").dequeue();});

$('#run').click(function(){$(".div_1").animate({'top':'400px'},3000).animate({'left':'500px'},3000).animate({'top':'50px'},3000).animate({'left':'50px'},3000);});$("#stop").click(function(){$(".div_1").stop(true,false);});$("#dequeue").click(function(){$(".div_1").dequeue();});

5：终止：

$("a").hover(function(){$("p").stop().slideDown(500);},function(){$("p").stop().slideUp();});

注：一切都应该具体情况具体讨论，不能照旧而办，还有就是注意有的如stop等很多都有可选参数，有时很有用。

0 0