我看到的问题:
在CSS或动画中为内联 <a>
或 <span>
标签设置高度或宽度。阅读这篇文章,了解在尝试为内联标签设置高度或宽度时可能会遇到的问题。这适用于您的CSS和动画。如果您想要动画宽度,则需要在块元素上进行操作。
我认为动画可能会因为宽度和不透明度的切换而变得混乱。也许你最好为悬停指定两个回调,并直接指定动画的起点和终点,而不是让切换方法来决定起点和终点应该是什么。
例如,如果没有重新设计HTML成块级元素(我认为这是可靠地动画化宽度所必需的),则可以对不透明度进行平稳的动画处理。我已经在CSS中将起始点设置为所需的起始不透明度,并且已经停止使用切换来设置动画,并明确设置了它。我不确定是否必须这样做,但它肯定消除了切换会尝试猜测你想要什么的不确定性:http://jsfiddle.net/jfriend00/r2cdn/(仅在此jsfiddle中包括不透明度动画,两个动画均包含在下面的jsfiddle中)。
jQuery(document).ready(function() {
jQuery("a#post-nav-next").hover(function(){
jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "1.0"});
}, function() {
jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "0"});
}
);
});
对于宽度的切换,你希望在哪两种状态之间切换?这对我来说不太清楚,可能对jQuery.toggle()也不太清楚。如果你想要做的是动画化右侧填充,则可以直接进行动画化处理。
如果我为填充设置一个直接的动画,并在CSS中更改起始值,它就会平滑地开始动画。我不确定你想要的动画是什么,但这应该是你可以采取的方向:
http://jsfiddle.net/jfriend00/PE4qQ/。
jQuery(document).ready(function() {
jQuery("a#post-nav-next").hover(function(){
jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "1.0", "padding-right": "100px"});
}, function() {
jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "0", "padding-right": "0px"});
}
);
});