Несколько функций 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 растет и расширяется.
Я бы сказал - и это в основном относится ко всему в вашей карьере программиста - используйте рабочий пример в качестве основы и постепенно добавляйте ваши конкретные требования. Тестируйте рано и часто. Добавьте одну вещь и протестируйте, чтобы убедиться, что она сделала то, что вы ожидали. Как только вы создадите определенный уровень комфорта, вы сможете расширить этот итерационный цикл.
Надеюсь, это поможет!:)