У меня есть сценарий jQuery, который постепенно появляется и постепенно исчезает между контейнерами в их родительском контейнере. В зависимости от кнопки (дизайн, сеть) нажатый, это определяет который контейнер (#design
, #web
) постепенно исчезает и какой постепенно появляется в своем месте.
Теперь, затруднение здесь, оба этих контейнера (#design
,#web
) отличайтесь по высоте, поэтому когда я постепенно исчезаю и исчезаю промежуточный эти контейнеры, страница подпрыгивает к определенной позиции непосредственно после fadeIn()
концы вызова функции. То положение (x, y) является точно тем же как положением, которым страница была бы в если никакие контейнеры (#design
,#web
) были видимы в родительском контейнере (т.е. пустой контейнер), и страница была прокручена полностью до нижней части.
Кто-либо еще встретился с этим прежде? Любой совет значительно ценится, поскольку эта проблема прослушивает меня бесконечно.
PS. Я протестировал, это в Firefox и Safari и оба показывает ту же проблему.
//редактирование 1: Вот URL, который можно проверить: http://toolboxstudio.co.za/version3/?page=packages
Если бы Вы хотите видеть, как контейнер выглядел бы пустым: http://toolboxstudio.co.za/version3/?page=packages#empty, можно затем нажать на кнопку (Дизайн или сеть) чуть ниже баннера. Это постепенно появится корректное содержание и переключится между двумя. Удостоверьтесь, что Ваша страница оснащает просто целую страницу пустым контейнером в без дополнительного пространства под нижним колонтитулом. Затем нажмите на кнопки и прокрутите вниз маленькие пути, переключитесь между этими двумя кнопками. Вы будете видеть то, что я имею в виду о переходе страницы.
Вот код:
$("div.design.button a").click(function () {
$(this).parent("div").addClass("active");
$("div.web.button").removeClass("active");
if ($("div.web_content").is(":visible")) {
$("div.web_content").fadeOut(function () {
$("div.design_content").fadeIn();
});
} else {
$("div.design_content").fadeIn();
}
window.location.hash = "#design";
resizeWindow();
e.returnValue = false;
e.preventDefault();
return false;
alert("hello");
});
$("div.web.button a").click(function () {
$(this).parent("div").addClass("active");
$("div.design.button").removeClass("active");
if ($("div.design_content").is(":visible")) {
$("div.design_content").fadeOut(function () {
$("div.web_content").fadeIn();
return false;
});
} else {
$("div.web_content").fadeIn();
return false;
}
window.location.hash = "#web";
resizeWindow();
e.returnValue = false;
e.preventDefault();
return false;
alert("world");
});
Я думаю, что исправил это, изменив код на такой:
$("div.design.button a").click(function () {
$(this).parent("div").addClass("active");
$("div.web.button").removeClass("active");
if ($("div.web_content").is(":visible")) {
$("div.web_content").fadeOut();
$("div.design_content").fadeIn();
return false;
} else {
$("div.design_content").fadeIn();
}
window.location.hash = "#design";
resizeWindow();
e.returnValue = false;
e.preventDefault();
return false;
alert("hello");
});
$("div.web.button a").click(function () {
$(this).parent("div").addClass("active");
$("div.design.button").removeClass("active");
if ($("div.design_content").is(":visible")) {
$("div.design_content").fadeOut();
$("div.web_content").fadeIn();
} else {
$("div.web_content").fadeIn();
}
window.location.hash = "#web";
resizeWindow();
e.returnValue = false;
e.preventDefault();
return false;
alert("world");
});
@galambalazs:
Нет, я не думаю, что дело в этом, так как я удалил это первым и ничего не изменилось. Я просто не подозревал, что виной всему может быть ошибка в функции обратного вызова, которую я сделал.
Извините всех, я действительно боролся с этим часами, StackOverflow всегда был моим последним средством. А потом я просто решил попробовать кое-что, и это помогло.
Извините, я не могу загрузить код, чтобы вы могли увидеть, что я имею в виду под "это работает сейчас", SEACOM не работает, и у нас ограниченные ресурсы, наш FTP порт сейчас заблокирован.
Здравствуйте, Анриетт Комбринк, вы совершенно забыли упомянуть событие в обработчике событий щелчка.
Я думаю, что return false
вполне достаточно,
удалите следующие строки
e.returnValue = false;
e.preventDefault();
, поскольку вы не указали e
(событие), вы не можете использовать returnValue , preventDefault
Я думаю, это должно сработать, если нет, пожалуйста дайте нам знать
Хорошего дня !!