js问题 jquery问题 jquery的animate重复执行应该怎么解决

Posted 2023-05-04

$(document).ready(function()
$(".main-diban ul li img").mouseover(function()
$(this).animate(width:"50px",1000);
);
$(".main-diban ul li img").mouseout(function()$(this).animate(width:"80",1000);
);
)//多次用鼠标指向和离开图片的时候当我鼠标停止的时候图片任然在持续变宽变窄，鼠标指向和离开多少次它就执行多少次，应该怎么解决？

<script type="text/javascript">
/*可用stop()函数立即停止动画，再去执行当前时间产生的效果。这样却产生了一个问题：比如我的mouseover时间刚执行了500毫秒，但是我马上执行
mouseout的实现效果了，用了1000毫秒去完成本来500秒能完成的事件效果，这个在视觉上和效益上都有点问题，因此本人想出了一个小方法，有点戳，莫见笑:
定义一个计数器timer，默认值是1000,如果未中断动画时间为timer赋值1000，否则，即任何状况的动画执行过程被中断，则下一个动画事件执行时间：
timer=未执行效果效益百分比*1000
*/
$(document).ready(function()
var timer = 1000;
$(".main-diban ul li img").mouseover(function()
if($(this).is(":animated"))

//它要变小所以 时间为:效益差百分比*效益时间
timer=($(this).width()-50)/30*1000;
$("#test").html(timer);

else

timer = 1000;

$(this).stop().animate(width:"50px",timer);
);
$(".main-diban ul li img").mouseout(function()
if($(this).is(":animated"))

//原理同上
timer=(80-$(this).width())/30*1000;

else

timer = 1000;

$(this).stop().animate(width:"80px",timer);
);
)
</script> 参考技术A $(this).animate(width:"50px",1000);

这一句更改为：

$(this).stop().css(width:"80").animate(width:"50px",1000);     //先停止上一次动作，并复原图片尺寸，再执行动画

 

 

$(this).animate(width:"80",1000);

这一句更改为：

$(this).stop().css(width:"50").animate(width:"80px",1000);     //先停止上一次动作，并复原图片尺寸，再执行动画

参考技术B $(document).ready(function()
if( !$(".main-diban ul li img").is(":animated") )
$(".main-diban ul li img").mouseover(function()
$(this).animate(width:"50px",1000);
);
$(".main-diban ul li img").mouseout(function()$(this).animate(width:"80",1000);
);

)

参考技术C 执行animate前先结束动作
$(this).stop(true,true).animate...... 参考技术D 这样的句子干嘛不写在css里面
.main-diban ul li img：hover
width:80px;

jQuery基础

1.js存在的问题

window.onload( ),这个函数事件存在事件覆盖的问题

部分存在兼容的问题

代码冗余 过程繁琐

代码的容错性低（上边有错，下边的代码不会执行）

实现动画效果繁琐

 

2.什么是jQuary

就是js的类库，实现了平时开发中常用的功能。方便调用，提高开发效率

这个库，就是JS文件。它吧功能封装到一个文件，将来使用直接拿过来使用即可！

其实jQ就是跟animate一样，都是一个库，只不过我们实现的功能不够强大

 

3.基本使用

①引入jQuary文件

②入口函数 $（document）.ready(function(){ ① } );

③实现功能代码 例：①$("#btn").click(function(){ //不带on

$("div").text("好哦")//获取所有的div并设置内容

})

 

4.主要学习的内容

主要学习类库中提供的一系列方法（API）

几乎所有的操作都是方法，一定要带（）来 调用方法；

jQuary三个版本的说明：v1.xxx 兼容性 行非常的好 ，能够兼容到IE6-8（文件大）

v2.xxx v3.xxx兼容性是IE9+（文件小，更利于在移动端使用 ，如果再想使用这些功能，就去jQuary官网找到这些功能即可）

min是带压缩的！！！让 JS文件变的更小，让网站在更短的时

间加载出来

同版本的文件，平时开发时就大一点的，项目上线时一定用min。

 

5. 在使用之前先引用jQ文件，然后再去使用，不要先使用jQ代码，再引用文件

入口函数的两种方式

$（document）.ready(function(){ ① } );//文档有没有准备好 $函数里的返回值可以来调用ready方法

window.onload=function(){ }//类似

$(function(){ ②}) //作用和①都是相同的

作用： 等页面加载完成了，在执行事件处理程序中的代码，和window.onload是有区别的

 

6.

7. $是什么？

就是一个函数

$和jQuery的作用一样，也能够引用整个jQuary库 函数本身也是对象 区分大小写

 

8.jQuery和DOM对象的区别

DOM对象相对于衣服，一件一件的洗，一个一个的操作

jQuery相当于洗衣机 里边有一系列的DOM对象和许多方法 一次性操作多个

DOM： 通过DOM提供的API，获取到的元素对象就是DOM对象 具有一系列的属性和方法

jQuery： 通过 jQuery获取元素的方法，获取的对象就是 jQuery对象 例：show( ) text( )

jQuery对象不能使用DOM对象中的方法，DOM对象不能使用 jQuery的方法

 

9. jQuery转换成DOM对象

var $dv=$("div");

var dv=$dv[0] //这样就把对象取出来了

jQuery对象中就是一个一个的DOM 对象（从洗衣机中取衣服）

 

DOM如何转换成 jQuery对象

$(里边是DOM对象) var $dv1=$(dv),将DOM当成参数传给$( )

 

10.

jQ选择器，就是jQ中提供的用来获取DOM元素的一些字符串，配合$（）来

获取元素。

基本选择器：

id(能用id的就用id) $("#cc").css("属性名称"，“属性值”)

标签选择器：$("li").css("",""); 匹配页面中指定标签名的元素

类选择器：$(".li")

通配符选择器：$("*") 所有的从上往下所有的元素（尽量少用）

并集选择器：$("li","p") 匹配以逗号分隔的多个选择器

交集选择器：$("p.hot")

层级选择器：

子代选择器：$("#cc>li") 获取父元素中的直接 子元素【里边的可以是标签，类。。。】

后代选择器：$(" ")包含所有的后代元素

方法：

children( )用来获取jQ对象的子代元素，这个方法还可以传入一个参数（一般是基本选择器）

事件：

mouseenter( ); mouseleave( );

选择器都是字符串，而this是对象啊

 

过滤选择器：

：odd 奇数行选择器 配合其他的选择器来使用 $("li:odd")

: even 偶数行选择器 索引号为偶数的

: eq(index) 选择指定索引号的元素 $("li:eq(6)")

:il(index)

:gt(index)

 

属性选择器：

li[id]: li中只要有id属性就被 找出来

[属性名^="属性中包含的字符"]

 

 

方法：

find(选择器 )获取当前对象的后代元素， 后代选择器相同

children( )这里的参数可以省略

siblings( 可以传个选择器进来)：获取到当前元素的兄弟元素