一个手风琴案例的简单js封装
$.fn.accordion = function (width) {
//接受width,没有穿width默认为50
width = width || 50;
//在后代中找li
var $li = this.find("li");
//本身的宽
var Length=this.width()
//鼠标移上去获得的最大宽
var maxLength = this.width() - width * ($li.length - 1);
//li 平均的宽
var avgLength = this.width() / $li.length;
$li.bind({
//鼠标移入
mouseenter:function () {
//鼠标移入的 li 的宽为 maxLength,其他为 width
$(this).stop().animate({width: maxLength}).siblings().stop().animate({width: width})
$(this).find($("img")).stop().animate({width: maxLength})
},
//鼠标移出
mouseleave:function () {
//鼠标移出后的 li 的宽为 avgLength
$li.stop().animate({width: avgLength})
$(this).find($("img")).stop().animate({width: Length})
}
})
return this;
}