jQueryを使用したインライン要素のアニメーション化

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

  •  04-07-2019
  •  | 
  •  

質問

jQueryを使用してインライン要素（スパンなど）を表示および非表示にしようとしています。

toggle（）を使用するだけで期待どおりに動作しますが、toggle（＆quot; slow＆quot;）を使用してアニメーションを与えると、スパンをブロック要素に変換するため、ブレークを挿入します。

インライン要素でアニメーションは可能ですか？可能であれば、フェードインよりもスムーズなスライドを好むでしょう。

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

他のヒント

1つの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})
    ;
});

他の回答が示しているように、フェードは可能です。ただし、「スムーズなスライド」とは思いません。なります。簡単に言えば、要素の特定のプロパティをアニメーション化する必要があります。あなたが言及したようなインラインスパンには、特定の高さや幅はありませんが、不透明度はあります。

display：inline-blockがブラウザ間で十分にサポートされるまで、あなたがやりたいことは可能だとは思いません。今のところ、背景を赤にフェードし、要素を非表示にします。

display：inline-blockが十分にサポートされている場合、スタイルをinline-blockに変更してから幅または高さをアニメーション化できますが、残念ながら最近ではうまく機能しません。 2010年かもしれません：）

「アニメーション」がブロック要素にアニメーション化するものを変更するという事実は、左または右にスライドしようとしているものがfloat：leftで配置され、その隣のものもfloatで配置されている場合は問題ではありません：左

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

#btnUpdateButtonが次のようにスタイル設定されている場合、非常にうまくスライドし、コンテンツを右にプッシュします。

#btnUpdateButton {
    float: left;
    margin-right: 5px;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top