Question

Sorry if this is a silly question but I have been on web design for 2 weeks and I am trying to make some menu tabs. Specificity ones that protrude when you mouseover and recede back to start position when mouseleave. I have made some code but it seems to act strangely. When I mouse over its fine and the tab comes down 10px but when I leave the second time on any tab it recedes 10px then another 10px and it adds up each time incrementally, 20, 30, 40 etc.

我试过突然停下来，但我仍在学习。如果它很乱，请告诉我。

这是代码。

$(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);
});

友情链接