使用jQuery动画内联元素

StackOverflow https://stackoverflow.com/questions/231937

  •  04-07-2019
  •  | 
  •  

题

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

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

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

<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>
有帮助吗？

解决方案

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>

其他提示

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

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

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

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

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

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

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

如果你想要向左或向右滑动的东西是浮动的，那么'animate'会改变它对块元素的动画效果这个事实不是问题。左边和它旁边的任何东西也用float定位：左

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

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

#btnUpdateButton {
    float: left;
    margin-right: 5px;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top