0

私はjQueryの.animate関数で遊んでいます。この関数はかなり新しいのですが、何らかの理由で機能させることができません。どこが間違っているのかわからない。

まず、bodyタグでスクリプトを定義します...

<script>
$('.rgt_btn').click(function() {
  $('.ovlBox').animate({
    opacity: 0.0 // I hope this will work? I'm trying to fade this box out, and fade in another... Or something along lines of a carousel.
  }, {
    duration: 2000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('// I'm trying to display here another box, but not sure how I can achieve this? The entire <div> box code is quite long to paste here.');
    }
  });
});
</script>

そのすぐ下に、私の箱があります...

<div id="lmovlb" class="ovlBox"> <!-- Content, lots of it... -->
<div style="display: block;" class="lft_btn"></div>
<div style="display: block;" class="rgt_btn"></div>
</div>
4

1 に答える 1

3

これがデモンストレーションするjsfiddleです（ひどいcssを失礼します）。前に述べたように、コードを関数でラップし、ページの読み込み時に呼び出す必要があることに注意してください。さらに、可能であれば、外部のjsファイルを使用します。

これを実現する方法の例を次に示します。

var yourFunc = function() {
    $('.rgt_btn').click(function() {
        $('.ovlBox').animate({
            opacity: 0.0
        }, {
            duration: 2000,
            specialEasing: {
                width: 'linear',
                height: 'easeOutBounce'
            },
            complete: function() {
                alert("hello");
            }
        });
    });
}
$(document).ready(yourFunc);
于 2012-10-14T12:06:07.910 に答える