摆弄.animate()

Question

我正在使用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>

Answer 1

这是一个演示的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);