jquery - 摆弄 .animate()

Question

我正在使用 jQuery 中的 .animate 函数，我对该函数相当陌生，但是由于某种原因，我无法让它工作。不知道我哪里可能出错了。

首先，我在正文标签中定义脚本......

<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);