使用 jQuery 为内联元素设置动画答案

【问题标题】：Animating inline elements with jQuery使用 jQuery 为内联元素设置动画
【发布时间】：2010-09-18 22:01:27
【问题描述】：

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

如果我只使用 toggle()，它会按预期工作，但如果我使用 toggle("slow") 给它一个动画，它会将跨度变成一个块元素，因此插入中断。

内联元素可以制作动画吗？如果可能的话，我更喜欢平滑的滑动，而不是淡入。

<script type="text/javascript">
    $(function(){
        $('.toggle').click(function() { $('.hide').toggle("slow") });
    });
</script>
<p>Hello <span class="hide">there</span> jquery</p>
<button class="toggle">Toggle</button>

【问题讨论】：

标签： jquery css jquery-animate

【解决方案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:

<p>Hello <span class="hide">there</span> <span class="slide">jquery</span></p>
<button class="toggle">Toggle</button>

【讨论】：

这个解决方案和我的一样，但显然要好得多！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

正如其他答案所示，褪色是可能的。但是，我认为不会“平滑滑动”。简单地说，元素的特定属性必须是动画的。您提到的内联跨度没有特定的高度或宽度，尽管它确实具有不透明度。

【讨论】：

【解决方案5】：

在 display:inline-block 在浏览器中得到很好的支持之前，我认为你想做的事情是不可能的。现在，我想我会将背景淡化为红色，然后隐藏元素。

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

【讨论】：

【解决方案6】：

如果您尝试向左或向右滑动的内容使用 float:left 定位并且它旁边的任何内容也使用 float 定位，那么“动画”将其动画内容更改为块元素的事实不是问题：离开

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

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

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

【讨论】：