jQuery悬停动画然后在第二个处理程序问题中留下动画？

Posted 2023-05-08

【中文标题】jQuery悬停动画然后在第二个处理程序问题中留下动画？

【英文标题】：jQuery hover with animate then animate left in second handler issue?

【发布时间】：2013-06-08 05:05:34

【问题描述】：

我似乎无法解决这个小问题。当我使用类 .nav_button 将鼠标悬停在 div 之外时，不透明度会发生变化，但按钮从底部向上移动 15px 似乎在第二个处理程序中没有生效？

Js：

$(document).ready( function()
    $('.nav_button').hover( 
    function()
    $(this).animate(top:'15px',opacity:'0.5','slow')
    ,
    function()
    $(this).animate(bottom:'15px',opacity:'1','slow')
    );
);

CSS：

.nav_button
    height:80px;
    width:90px;
    margin-right:3px;
    border-radius:5px;
    border:2px solid #555879;
    background-color:#2182c2;
    display:inline-block;
    position:relative;

【问题讨论】：

向我们展示您的 .nav_button css。

对不起，我已经编辑过了。

【参考方案1】：

像这样？演示http://jsfiddle.net/yeyene/kNts8/

JQUERY

$(document).ready( function()
    $('.nav_button').hover( 
    function()
    $(this).stop().animate(top:'-15px',opacity:'0.5','slow')
    ,
    function()
    $(this).stop().animate(top:'15px',opacity:'1','slow')
    );
);

CSS

.nav_button
    background:red;
    position:relative;
    top:0px;
    padding:0 5px;
    z-index:100;

【讨论】：

哇，这很简单，谢谢！出于好奇，为什么“底部”不起作用？

是的，我必须等待 4 分钟才能接受 :) 所以这是因为它具有 15px 顶部的属性，并且需要更改才能使额外的移动生效。

:) .animate() 取决于它的元素 css。