案例效果
代码实现
jQuery代码(两种方法)
方法一:hover版
$(function () {
$(".king li").hover(function() {
$(this).addClass("current").siblings().removeClass("current");
}, function() {
$(".king li").eq(0).addClass("current").siblings().removeClass("current");
})
})
方法二:mouseenter版
$(function () {
// ① 鼠标经过某个小li 有两步操作:
$(".king li").mouseenter(function () {
// ② 当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
$(this).stop().animate({
width: 224,
}, 200).find(".small").fadeOut().siblings(".big").stop().fadeIn();
// ③ 其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
$(this).siblings("li").stop().animate({
width: 69,
}, 200).find(".small").fadeIn().siblings(".big").stop().fadeOut();
})
})