jQuery 鼠标移动上去出来悬浮在窗口右侧那种一移动上去就出来，如下图急急急

MZ090924 2014-12-01 09:22:08

不要用css3

...全文

282 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

蚊子0_0 2014-12-01

打赏
举报

引用 2 楼 jikeytang 的回复:

连续快速切换会出现动画的累加，需要改一下：在线演示
$('.sub a').hover(function(){
    $(this).addClass('on').stop().animate({ width : 135})
}, function(){
    $(this).removeClass('on').stop().animate({ width : 80})
});

不错！

jiangbai333 2014-12-01

打赏
举报

检测onmouseover onmouseout 当onmouseover 发生时，把指向的元素宽度增加，当onmouseout发生时，把宽度恢复到初始值！

豪情 2014-12-01

打赏
举报

连续快速切换会出现动画的累加，需要改一下：在线演示


$('.sub a').hover(function(){
    $(this).addClass('on').stop().animate({ width : 135})
}, function(){
    $(this).removeClass('on').stop().animate({ width : 80})
});

豪情 2014-12-01

打赏
举报

在线演示代码演示：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:14px/1.5 '微软雅黑';background: #fff;}
        .menu{ position:fixed; top:50%;right: 0;}
        .sub{ list-style: none;}
        .sub li{position:relative;width:80px;right:0; margin-bottom:5px;height:60px; line-height:60px;}
        .menu a{position:absolute;top: 0; right:0;width:80px; display:block;  background: #000;border-radius:10px 0 0 10px;color: #fff; text-align:center; text-decoration:none;}
        .menu a.on{ background: #4487cd;color: #fff;}
        /*.menu a:hover{ width:135px; background: #4487cd;color: #fff;}*/
    </style>
</head>
<body>
<div class="menu">
    <ul class="sub">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
    </ul>
</div>
<script>
    $('.sub a').hover(function(){
        $(this).addClass('on').animate({ width : 135})
    }, function(){
        $(this).removeClass('on').animate({ width : 80})
    });
</script>
</body>
</html>