js控制的动画,显示隐藏(元素,动画,显示隐藏)

 

js控制的动画,显示隐藏(元素,动画,显示隐藏)_第1张图片

前端的页面代码

js控制的动画,显示隐藏(元素,动画,显示隐藏)_第2张图片

jq控制的代码

// 鼠标悬浮效果
$('.hwenben').hover(function(){
    $(this).addClass('bacf2')
    },function(){
    $(this).removeClass('bacf2')
})
$('ul li').hover(function(){
    // 动画移动加上显示隐藏
    $(this).children().eq(1).animate({top:'20%'});
    $(this).children().next().next().show().animate({top:'42%'});
    //console.log($(this).children().children())
},function(){
    $(this).children().eq(1).animate({top:'40%'});
    $(this).children().next().next().animate({top:'60%'}).hide();
})

 

你可能感兴趣的:(JavaScript)