21

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

toggle() だけを使用すると期待どおりに動作しますが、toggle("slow") を使用してアニメーションを与えると、スパンがブロック要素に変わり、ブレークが挿入されます。

インライン要素でアニメーションは可能ですか? フェードインではなく、できればスムーズなスライドが望ましいです。

<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

たった 1 つの 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

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

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

于 2008-10-24T01:43:14.197 に答える
0

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

于 2008-10-24T00:41:20.030 に答える
0

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

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

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

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