使用jQuery动画内联元素 [英] Animating inline elements with jQuery

问题描述

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

I am trying to show and hide an inline element (eg a span) using jQuery.

如果我只是使用toggle我使用切换（慢）给它一个动画，它将跨度变成一个块元素，因此插入断点。

If I just use toggle(), it works as expected but if I use toggle("slow") to give it an animation, it turns the span into a block element and therefore inserts breaks.

动画可能与内联元素吗？如果可能，我宁愿平滑滑动，而不是淡入。

Is animation possible with inline elements? I would prefer a smooth sliding if possible, rather than a fade in.

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

推荐答案

code>有一堆奇怪的东西，包括隐藏或转换奇怪的元素有时。这里有一个类似的解决方案：

toggle() has a bunch of weird things with it, including hiding or transforming odd elements at times. here's a similar solution:

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

编辑：这里有一个方法来添加平滑滑动， markup：

edit: here's a way to add smooth sliding, with minimal extra HTML markup:

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>

这篇关于使用jQuery动画内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！