21

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

如果我只使用切换（），它会按预期工作，但如果我使用切换（“慢”）给它一个动画，它会将跨度变成一个块元素，因此插入中断。

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

<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>
4

6 回答 6

19

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>
于 2008-10-24T00:01:04.183 回答
9

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

#animated-element { display: inline-block!important }
于 2010-03-19T11:46:53.323 回答
1

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

$('.toggle').click(function() {
    $('.hide:visible').animate(
        {opacity : 0},
        function() { $(this).hide(); }
    );
    $('.hide:hidden')
        .show()
        .animate({opacity : 1})
    ;
});
于 2008-10-23T23:49:25.673 回答
0

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

于 2008-10-24T00:41:20.030 回答
0

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

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

于 2008-10-24T01:43:14.197 回答
0

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

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

如果#btnUpdateButton 具有以下样式，那么它会很好地滑动并将内容推到右侧。

#btnUpdateButton {
    float: left;
    margin-right: 5px;
}
于 2009-07-18T05:01:42.140 回答