jquery animate方法动画效果没有

Posted 2023-05-08

静态页面上测试过，但到了动态页面后就没了效果，指定了duration参数设定非常大的值比如5000，也是没有动画过程，只有在5秒后直接显示了动画结果，请问为什么

用于创建自定义动画的函数。
返回值:jQuery animate(params, [duration], [easing], [callback])

如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。paramsOptions一组包

含作为动画属性和终值的样式属性和及其值的集合

params 对象,注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left，如果使用的是“hide”、

“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

duration (可选)三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"

callback (可选)Function在动画完成时执行的函数

0.停止动画

if($(\'.swaplist,.mainlist\').is(\':animated\'))
$(\'.swaplist,.mainlist\').stop(true,true);


animate实例：
1.点击按钮后div元素的几个不同属性一同变化

$("#go").click(function ()
$("#block").animate(
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
, 1000);
);
2.让指定元素左右移动

$("#right").click(function ()
$(".block").animate( left: \'+50px\' , "slow");
);
$("#left").click(function ()
$(".block").animate( left: \'-50px\' , "slow");
);
3.在600毫秒内切换段落的高度和透明度

$("p").animate(
height: \'toggle\', opacity: \'toggle\'
, "slow");
4.用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

$("p").animate(
left: 50, opacity: \'show\'
, 500);
5.切换显示隐藏

$(".box h3").toggle(function()
$(this).next(".text").animate(height: \'toggle\', opacity: \'toggle\', "slow");
$(this).addClass("arrow");
return false;

,function()
$(this).next(".text").animate(height: \'toggle\', opacity: \'toggle\', "slow");
$(this).removeClass("arrow");
return false;
);
);

//滚动焦点
$(window).scroll(function () //当前窗口的滚动事件
var winTop = $(window).scrollTop(); //获取当前窗口的大小
var objTop = $("#obj1").offset().top; //获取当前对象的x坐标
); 参考技术A 我之前遇到过一次,没有动画效果,
当时解决的的,如果 动画涉及部分,display值不能为空.或block 或 none本回答被提问者采纳 参考技术B 不要使用不当的方法误人子弟。跟display无关 参考技术C animate修改不了颜色的
这里有一个javascript 颜色梯度和渐变效果
你可以参考一下

jQuery animate()动画效果

1.jQuery动画效果

jQuery animate()方法用于创建自定义动画

$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性；
//可选的 speed 参数规定效果的时长,它可以取以下值："slow"、"fast" 或毫秒；
//可选的 callback 参数是动画完成后所执行的函数名称；

下面为几个实例：

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    height:‘+=150px‘,
    width:‘+=150px‘
  });
});
//点击button按钮时div块向左右(取决于当前位置)移动的同时放大150px；
//其中‘+=‘为相对变化，再次点击button时div块继续放大150px；


$("button").click(function(){
  var div=$("div");
  div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
  div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
});
//编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列，然后逐一运行这些 animate 调用；


$("button").click(function(){
  $("div").animate({
    height:‘toggle‘
  });
});
//可以把属性的动画值设置为 "show"、"hide" 或 "toggle"；
//点击button时，div块向上收缩，再次点击向下展开；

 2.jQuery停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列,默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行；
//可选的 goToEnd 参数规定是否立即完成当前动画，默认是 false；

转载自本人ITeye链接：http://xiaozhuang0706.iteye.com/blog/2257182