摆弄.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);