0

我将两个脚本组合在一起：一个滚动条和一个内容推子。当我交换内容（淡入淡出）时，具有大量内容的 div 会使滚动 div 超长。我正在阅读内容滚动的插件演示（http://manos.malihu.gr/jquery-custom-content-scroller），您可以$(selector).mCustomScrollbar("update");在加载不同的内容时使用它来相应地调整 div。

我知道代码需要在我的褪色脚本中的某个地方，但是在哪里？这是褪色脚本，它会去哪里？

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
(function($) {
    $.fn.Fader = function() {
        this.each(function() {
            $('.clickme').bind('click', function(e) {
                e.preventDefault();
                $( "#mediaswap div" ).fadeOut();
                $( "#mediaswap div" + $(this).attr('name') ).fadeIn();
            })
        });
    }
})(jQuery);


$(function() {
    $('#mediaswap').Fader();
});
});//]]>  

</script>
4

2 回答 2

4

我已经回答了你对帖子的评论，但我也在这里写。

由于您淡入/淡出 div，您必须调用 update 方法作为 .fadeIn() 函数的回调，因此它会在动画完成后更新滚动条：

$( "#mediaswap div" + $(this).attr('name') ).fadeIn(function(){
    $(this).mCustomScrollbar("update");
});

此外，当您最初调用插件时，您可以使用一个额外的选项参数，它会检查内容大小并在滚动条发生变化时自动更新：

$("#mediaswap div").mCustomScrollbar({
    advanced:{ updateOnContentResize:true }
});

使用 updateOnContentResize 选项取决于您的其余代码（调用插件的位置），因此我建议使用第一种方法。

于 2012-07-27T17:05:28.343 回答
0

我建议检查 div 以查看它是否使用类似这样的动画：

var wait = setInterval(function() {
        if( !$("#mediaswap div").is(":animated")) 
        {
                clearInterval(wait);
                //put the code in here because it checks 
                  for whether the DIV is currently animated.
            }
        }, 200);

如果动画完成动画需要更长的时间，您可以更改间隔。

于 2012-07-26T16:57:44.470 回答