2

アコーディオンのセクションを削除するときにアニメーションを動作させようとしています。ただ消えるのではなく、超クールなことをしてほしい。この場合、animate を動作させるにはどうすればよいですか? 本当にありがとう。これが私のJSです：

$('document').ready(function(){
  $('#accordion .red').click(function(){

    $(this).parent('div').prev( 'h3' ).remove();
    $(this).parent('div').remove();
    $(this).parent('div').prev('div').animate("bounceslide");

    return false;
  });
});

そして、ここに私のHTMLがあります: 

<div id="accordion">

    <h3><a href="#">Section 1</a></h3>
    <div class="squares">
            <a href="#" class="green">1</a>
            <a href="# "class="red">2</a>
            <a href="#" class="blue">3</a>  
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
    </div>

    <h3><a href="#">Section 1</a></h3>
    <div class="squares">
            <a href="#" class="green">1</a>
            <a href="# "class="red">2</a>
            <a href="#" class="blue">3</a>  
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
    </div>
</div>
4

1 に答える 1

2

現在のところ、ロジックに少し欠陥があります...次のように
呼び出します。

$(this).parent('div').remove();

その後：

$(this).parent('div').prev('div').animate("bounceslide");

DOM に存在しなくなったため$(this)(親と共に削除されました)、上記のセレクターは機能しません。

アニメーション コールバックを使用して、非常にクールなものの後にアコーディオン アイテムを削除することをお勧めします。
何かのようなもの：

$('#accordion .red').click(function(){
  var $toRemove = $(this).parent('div').prev('h3');
      $toRemove = $toRemove.add($(this).parent('div'));

  $toRemove.animate({height:0}, 500, function(){
    // This is the callback.
    $toRemove.remove();
  });

  return false;
});

JSfiddle: http://jsfiddle.net/L9BXS/

于 2012-10-09T20:55:46.697 に答える