Несколько функций jQuery на 1 кнопке

Итак, у меня есть одна кнопка, с которой я пытаюсь заставить работать несколько функций. При загрузке страницы вышеупомянутый div скрыт, после нажатия кнопки он становится видимым и прокручивается вверх. Я могу заставить обоих работать по отдельности, но не вместе. Может кто-то указать, что я делаю не так?

$(function () {
    $("#work").hide();
    $(".button").bind("click", function () {
        $("#work").show();
    });
    $(".button").click(function () {
        $('html, body').animate({
            scrollTop: $("#work").offset().top
        }, 2000);
    });
});

ОБНОВЛЕНИЕ 1:

Добавлена ​​скрипка: http://jsfiddle.net/5qQJN/1/

ОБНОВЛЕНИЕ 2:

Так что это удается работать, но только после того, как вы нажмете его один раз. Скажем, вы щелкаете по нему, перепрыгиваете наверх, снова прокручиваете щелчок вниз, а затем он прокручивается с анимацией... так значит ли это, что мне нужна загрузка окна?

2 ответа

$(function () {
    $("#work").hide();
    $(".button").click(function () {
        $("#work").show();
        $('html, body').animate({
            scrollTop: $("#work").offset().top
        }, 2000);
    });
});

Объединение их должно работать, так как кажется, что ничего не загружается динамически.

Я сделал скрипку для вас: http://jsfiddle.net/FaC4r/

Похоже, он там работает. Было бы полезно, если бы вы предоставили свой HTML.

THE DIV IS HIDDEN UP HERE - SCROLL DOWN FOR BUTTON
<div id="work"></div>

<div id="spacer"></div>

<input type="button" class="button" value="CLICK ME TO SHOW 'WORK' AND SCROLL UP TO IT">

[ОБНОВЛЕНИЕ НА ОСНОВЕ КОММЕНТАРИЙ]

Я отредактировал Скрипку для вас с вашим новым HTML: http://jsfiddle.net/FaC4r/2/

Похоже, ваш CSS указывает рабочий div с отступом 0, что в сочетании с тем, что в div ничего нет, означает, что он невидим! Вы можете видеть в скрипте выше, что я использую 2em в заполнении, чтобы убедиться, что я вижу, как div растет и расширяется.

Я бы сказал - и это в основном относится ко всему в вашей карьере программиста - используйте рабочий пример в качестве основы и постепенно добавляйте ваши конкретные требования. Тестируйте рано и часто. Добавьте одну вещь и протестируйте, чтобы убедиться, что она сделала то, что вы ожидали. Как только вы создадите определенный уровень комфорта, вы сможете расширить этот итерационный цикл.

Надеюсь, это поможет!:)

Другие вопросы по тегам