Question

很抱歉，如果这是一个愚蠢的问题，但我已经进行了2周的网页设计，我正在尝试制作一些菜单选项卡。鼠标移动时突出显示的特异性，当鼠标移动时返回到开始位置。我做了一些代码，但似乎行为奇怪。当我鼠标悬停在它的罚款上并且标签下降10px但是当我第二次离开任何标签时它会退回10px然后再下降10px并且每次递增累加，20,30,40等等。

我尝试过停止甚至正常但我还在学习。如果它凌乱让我知道。

这是代码。

$(document).ready(function(){
 $('.buttons').mouseover(function(){
  $(this).animate({top: '+=10'}, 200, function() {
   $(this).mouseleave(function(){
    $(this).animate({top: '+=-10'}, 200, function() {

    });
   });
  });
 });
});

Answer 1

查看http://jsfiddle.net/thewebdes/DqfJ5/

那是你所追求的吗？

HTML

<ul>
    <li><a href="#" class="buttons">Link 1</a></li>
    <li><a href="#" class="buttons">Link 2</a></li>
    <li><a href="#" class="buttons">Link 3</a></li>
</ul>

CSS

body { font-family: arial, helvetica, sans-serif; }
li { float: left; display: inline; margin: 0 1px 0 0; }
a:link, a:visited { position: relative; display: block; padding: 5px 10px; text-decoration: none; color: #39F; background: #039; border: 1px solid #03C; }
a:hover, a:active { color: #F90; background: #960; border: 1px solid #630; }

JS

$('.buttons').hover(function() {
    $(this).stop(true,true).animate({top: '-=10', paddingBottom: '15px'}, 200);
}, function() {
    $(this).stop(true,true).animate({top: '+=10', paddingBottom: '5px'}, 200);
});

- 编辑以回答评论 -

如果您不想移动文字：

$('.buttons').hover(function() {
    $(this).stop(true,true).animate({paddingBottom: '15px'}, 200);
}, function() {
    $(this).stop(true,true).animate({paddingBottom: '5px'}, 200);
});

如果你这样做：

$('.buttons').hover(function() {
    $(this).stop(true,true).animate({paddingTop: '15px'}, 200);
}, function() {
    $(this).stop(true,true).animate({paddingTop: '5px'}, 200);
});

“退出”和“突出”菜单选项卡Jquery

1 个答案: