javascript - Action 相关的 Javascript/Jquery - 如何仅在另一个脚本完成后激活命令？

Question

我正在我的网站上工作，我决定使用“设计的”滚动条而不是浏览器自带的滚动条对我有利。我很幸运遇到这个脚本http://www.hesido.com/web.php?page=customscrollbar这基本上完全符合我的需要。

我遇到的唯一问题是，我试图将自定义滚动条应用于某些最初隐藏的 div，然后通过隐藏/显示之间的链接 div 进行切换。正如编程页面 (http://www.hesido.com/flexcroll/flexcroll-programming.htm) 所解释的那样，有时滚动条需要更新和/或手动应用，因为在隐藏的 div 中它们不会在页面加载时加载打开。

我检查了我的 CSS 和 HTML，如果没有隐藏 div，代码可以正常工作，所以我 100% 确定这与我隐藏 div 的方式有关。

基本格式是

$(document).ready(function() {
$('#iddiv').hide();});



<pre><code>$(document).ready(function() {
$('#id').click(function() {
$('#iddiv').animate({
height: 'toggle'
}, 2000
);
});});
</code></pre>



所以我最初隐藏它，然后通过按钮切换它。现在，在这个逻辑中 - 手动应用 fleXenv.fleXcrollMain("your-div-id");应该在脚本最后一行(包含 } 的行)之上的某处； ).

然而，这要么使 div 不可滚动，要么弄乱我的 Javascript 的其余部分(scrollTo 函数停止工作，等等......)

我的问题是，作为一个新手 JS 用户 - 在切换激活后，我需要在哪里放置手动激活自定义滚动条的代码？结构是什么？ 我的意思是，fleXenv.fleXcrollMain("your-div-id");独立存在，它是否需要自己独立的功能，它前面有 $ 吗？

非常感谢任何可以帮助我解决这个问题的人!最后一点阻止了我启动我的网站。

更新! HERE是我试图实现的示例的 CSS/HTML 和代码；因为脚本中的一个文件需要下载才能工作，我认为唯一的方法是将所有位复制并粘贴到一个新的 HTML 文档中。

Answer 1

jQuery .animate() 函数接受更多参数。其中之一是在动画完成时调用的函数。

function activateScrollbar () {
    fleXenv.fleXcrollMain('iddiv');
}

$('#iddiv').animate({
        height: 'toggle'
    },
    2000,
    activateScrollbar
);

你也可以使用匿名函数，像这样:

$('#iddiv').animate({
        height: 'toggle'
    },
    2000,
    function () {
        fleXenv.fleXcrollMain('iddiv');
    }
);

jQuery 中大多数包含动画的函数(如 .hide() 或 .fadeOut())允许您传递一个函数，该函数在动画完成。这些 jQuery 函数中的大多数都允许您在配置对象中传递这些额外的参数，这样可读性更强:

$('#iddiv').animate({
        height: 'toggle'
    },
    {
        duration: 2000,
        complete: function () {
            fleXenv.fleXcrollMain('iddiv');
        }
    }
);

参见 .animate()文档以获取更多详细信息。

这是一个包含点击行为的完整示例:

$('#myButton').click(function () {

    $('#iddiv').animate({
            height: 'toggle'
        },
        {
            duration: 2000,
            complete: function () {
                fleXenv.fleXcrollMain('iddiv');
            }
        }
    );

});