使用jQuery动画内联元素

我试图使用jQuery显示和隐藏内联元素（例如跨度）。

如果我只使用toggle（），它按预期工作，但如果我使用toggle（“slow”）给它一个动画，它会将span转换为一个块元素，因此插入中断。

内联元素是否可以动画？ 如果可能的话，我宁愿顺利滑动，而不是淡入淡出。

 $(function(){ $('.toggle').click(function() { $('.hide').toggle("slow") }); });  
Hello there jquery
 Toggle 

Answer 1

toggle()有很多奇怪的东西，包括有时隐藏或转换奇数元素。 这是一个类似的解决方案：

 $('.toggle').click(function() { $('.hide').animate({ 'opacity' : 'toggle', }); }); 

编辑 ：这是一种添加平滑滑动的方法，只需要额外的HTML标记：

 var hidepos = $('.hide').offset().left; var slidepos = $('.slide').offset().left; $('.toggle').click(function() { var goto = ($('.slide').offset().left < slidepos) ? slidepos : hidepos; $('.slide').css({ 'left' : $('.slide').offset().left, 'position' : 'fixed', }).animate({ 'left' : goto, }, function() { $(this).css('position', 'static'); }); $('.hide').animate({ 'opacity' : 'toggle', }); }); 

HTML：

 
Hello there jquery
 Toggle 

Answer 2

只有一个CSS属性会让你开心： http ： //terion-fallen.livejournal.com/332945.html

 #animated-element { display: inline-block!important } 

Answer 3

我不认为这样可能。 我能想到的唯一方法是在0和1之间设置不透明度的动画，并在动画上使用回调，然后打开或关闭它。

 $('.toggle').click(function() { $('.hide:visible').animate( {opacity : 0}, function() { $(this).hide(); } ); $('.hide:hidden') .show() .animate({opacity : 1}) ; }); 

Answer 4

正如其他答案所示，衰落是可能的。 但是，我不认为“顺畅滑动”。 简而言之，元素的特定属性必须是动画的。 您提到的内联跨度没有特定的高度或宽度，但它确实具有不透明度。

Answer 5

在显示之前我不认为你想做什么：跨浏览器很好地支持inline-block。 现在，我想我会将背景淡化为红色，然后隐藏元素。

如果显示：inline-block得到了很好的支持，你可以将样式更改为inline-block，然后设置宽度或高度的动画，但不幸的是，这些天不能很好地工作。 也许在2010年:)

Answer 6

如果你试图向左或向右滑动的东西是浮动的，那么’animate’改变它对块元素的动画的事实不是问题：左边和它旁边的任何东西也用float定位：left

  $('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" }); 

如果使用以下内容对#btnUpdateButton进行样式设置，那么它会很好地滑动并将内容推向右侧。

 #btnUpdateButton { float: left; margin-right: 5px; }