本文介绍了一个使用jQuery实现的悬停按钮动画效果。当鼠标悬停在按钮上时，按钮宽度会平滑地从40像素变化到160像素；当鼠标离开时，宽度又会平滑地缩回到40像素。该效果通过jQuery的animate方法实现，并利用了属性'num'来判断按钮的状态。
$(document).ready(function(){
$(".suspend").click(function() {
var num=$(this).attr('num');
if (num=='0') {
$(this).stop();
$(this).animate({width: 160}, 400);
$(".suspend").attr('num','1');
}else{
$(this).stop();
$(this).animate({width: 40}, 400);
$(".suspend").attr('num','0');
}
})
});
$(".suspend").click(function() {
var num=$(this).attr('num');
if (num=='0') {
$(this).stop();
$(this).animate({width: 160}, 400);
$(".suspend").attr('num','1');
}else{
$(this).stop();
$(this).animate({width: 40}, 400);
$(".suspend").attr('num','0');
}
})
});
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
