animate结合jQuery实现hover用户交互动画
2023-09-11 14:14:50 时间
$(document).ready(function(){
var class_top_nav=".pro_core ul li";//顶部分类菜单
var animate="animated pulse";
var num=0;//获取点击元素的下标
$(class_top_nav).hover(
function(){
num=$(class_top_nav).index(this);
console.log(num)
$(class_top_nav).eq(num).addClass(animate);
},function(){
$(this).siblings().removeClass(animate);
}
);
});
你在测试这段代码前需要引入animate,css和jQuery.js文件
var class_top_nav=".pro_core ul li";//顶部分类菜单
解释:你要控制的标签;.pro_core类下面的li标签
var animate="animated pulse";
解释:当鼠标悬浮上去你要用anmate的那个动画,而为什么要写2个,这是animated的规范,前面是animate,后面是动画类
var num=0;//获取点击元素的下标
解释:用于存放.pro_core >ul> li的下标
num=$(class_top_nav).index(this);
解释:获取下标
$(class_top_nav).eq(num).addClass(animate);
解释:给该标签添加类
$(this).siblings().removeClass(animate);
解释:移除
$(class_top_nav).hover(
function(){
鼠标悬浮上去执行的代码块……
},function(){鼠标移走执行的代码块……
}
);
相关文章
- JQuery动态table添加行删除行
- 恶补web之八:jQuery(1)
- 简单日历插件jquery.date_input.pack
- jQuery中的事件与动画
- 第四章使用jQuery操作DOM元素
- jQuery最简单的留言功能^-^
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
- jquery formValidate demo 采用struts 异步方式检验用户名是否存在
- jQuery插件 -- Form表单插件jquery.form.js
- jQuery表单2
- 【jQuery小实例】---2自定义动画
- JQuery模板插件jquery.tmpl-动态ajax扩展
- 电子签章盖章之jQuery插件jquery.zsign
- HTML里Dom onload和jQuery document ready这两个事件的区别
- jquery constructor
- css js jquery移动动画
- 自定义构建jquery插件实验(2)
- jQuery UI 实例 - 切换 Class(Toggle Class)
- jQuery UI 实例 - 标签页(Tabs)
- jquery的toggle动画效果显示隐藏
- 【课程分享】ASP.NET MVC5&微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)
- 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?
- jQuery.extend和jQuery.fn.extend的区别?
- jquery 清除动画队列不疑惑
- jQuery(四)动画、类数组对象操作、添加自定义函数、封装自定义插件
- 【jQuery】jQuery操作之如何查找元素_02
- jquery案例4——jq动画、jq显示与隐藏(规定时间)滑动下拉slideDown,滑动上拉slideUp