jQuery：滑动切换 ||代码有什么优化吗？

Question

大家好，我是 jQuery 编程新手，我有一个快速代码片段，我希望有人为我测试一下。

我认为它运作良好..但我不知道这是否是处理它的最佳方法。

工作示例： http://jsfiddle.net/zWnLv/29/

//hide wrapper at document ready
        $('#newsbox_content_wrapper').hide();

        //toggle visiblility of newsbox and slide down to scroll window to newsbox
        $('.newsbox_toggle').bind('click', function () {
            //define speed for effect
            var $speed = 400;

            //check to see if the class 'open' exists then run
            if ($('.newsbox_toggle').hasClass('open')) {
                //scroll to the top of the newsbox
                $('html, body').animate({scrollTop: $('#header_lower').offset().top}, $speed);
                $('#newsbox_content_wrapper').slideDown($speed);
                $('.newsbox_toggle').removeClass('open');
                //delay HTML replacement to sync with animation
                $('.newsbox_expand').delay($speed).queue(function(n) {
                    $(this).html('Click to Close News Feature.');
                    $(this).addClass('rotate');
                    n();
                });
            } else {
                //scroll back to top of body
                $('html, body').animate({ scrollTop: 0 }, $speed);
                $('#newsbox_content_wrapper').slideUp($speed);
                $('.newsbox_toggle').addClass('open');
                //delay HTML replacement to sync with animation
                $('.newsbox_expand').delay($speed).queue(function(n) {
                     $(this).html('Click to Read More.');
                     $(this).removeClass('rotate');
                     n();
                });
            }
        });

Answer 1

“优化”这一点的唯一方法是使用回调而不是手动延迟函数。 .slideUp() 和 .slideDown() 接受动画完成后执行的回调。
使用链接是最佳实践，因此您不必重新创建对象（请参阅回调函数）。

此外，我还使用 jQuery 1.7 中添加的新 on() 更改了 bind() 函数。

$('.newsbox_toggle').on('click', function () {
    //define speed for effect
    var $speed = 400;

    //check to see if the class 'open' exists then run
    if ($('.newsbox_toggle').hasClass('open')) {
        //scroll to the top of the newsbox
        $('html, body').animate({scrollTop: $('#header_lower').offset().top}, $speed);
        $('#newsbox_content_wrapper').slideDown($speed, function() {
            $('.newsbox_expand').html('Click to Close News Feature.').addClass('rotate');
        });
        $('.newsbox_toggle').removeClass('open');
    } else {
        //scroll back to top of body
        $('html, body').animate({ scrollTop: 0 }, $speed);
        $('#newsbox_content_wrapper').slideUp($speed, function() {
            $('.newsbox_expand').html('Click to Read More.').removeClass('rotate');
        });
        $('.newsbox_toggle').addClass('open');
    }
});

如果你使用的是 jQuery < 1.7，使用.click()，它是.bind()的简写。

$('.newsbox_toggle').click(function () {
    // ...
});

Answer 2

在这里（滚动）： http://jsfiddle.net/zWnLv/43/

//hide wrapper at document ready and put in var for re-use
var newsbox = $('#newsbox_content_wrapper').hide();

//toggle visiblility of newsbox and slide down to scroll window to newsbox
$('.newsbox_toggle').bind('click', function() {   
    newsbox.slideToggle("slow",function() {
        $('html, body').animate({ scrollTop: newsbox.offset().top }, 'slow');
    });

});

到目前为止作为“点击阅读更多”，你有很多选择......你可以每次切换文本，或者，我的偏好，切换带有+/-（或箭头）背景图像的类，让用户直观地知道他们可以打开或关闭该部分。