使用jQuery动画内联元素

Question

我试图使用jQuery显示和隐藏内联元素(例如跨度).

如果我只是使用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>

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:

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

Answer 2

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

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