animate结合jQuery实现hover用户交互动画

$(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(){ 
 鼠标移走执行的代码块……
  }
  );