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() принимают вызовы, которые будут выполнены после завершения анимации. Лучше всего использовать цепочку, поэтому вам не нужно воссоздавать объекты (см. Функции обратного вызова).

Также я изменил функцию bind() с новой on(), которая была добавлена ​​в jQuery 1.7.

$('.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, используйте <code>.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');
    });

});

Что касается "нажмите, чтобы прочитать больше", у вас есть много вариантов ... вы можете переключать текст каждый раз или,Я предпочитаю переключать класс с помощью фонового изображения +/- (или стрелки), чтобы пользователь интуитивно знал, что он может открывать или закрывать этот раздел.