Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не правильное время анимации и область div'а (https://javascript.ru/forum/jquery/21935-ne-pravilnoe-vremya-animacii-i-oblast-div%27.html)

BoB 29.09.2011 21:56
Не правильное время анимации и область div'а
 
Добрый вечер.

Решил сделать страничку-визитку на JS используя jQuery, но при создании возникли некоторые проблемы.
  1. Выставляю время на анимацию 5секунд
    $("#tack_portfolio").animate({"top": "+=400px"}, "4000", 'easeInBack');
    , а она проходит за секунды, а то и меньше.
  2. Область при нажатии на фотографии определяется не правильно, я догадываюсь что это из-за моей корявой верстки, но из-за чего именно, не могу понять.

Собственно сама страничка http://moto-sale.net/lampo4ka/3/

Буду благодарен за любые советы

melky 29.09.2011 22:04
Цитата:
Сообщение от BoB (Сообщение 128788)
Выставляю время на анимацию 5секунд
$("#tack_portfolio").animate({"top": "+=400px"}, *!*"4000"*/!*, 'easeInBack');
, а она проходит за секунды, а то и меньше.
взаимоисключающие параграфы

у вас в коде это
$("#tack_portfolio").animate({"top": "+=400px"}, "4000", 'easeInBack');
    $("#tack_portfolio").hide(0);

поставьте скрытие в обработчик завершения анимации.

BoB 29.09.2011 22:12
Цитата:
Сообщение от melky (Сообщение 128791)
взаимоисключающие параграфы

у вас в коде это
$("#tack_portfolio").animate({"top": "+=400px"}, "4000", 'easeInBack');
    $("#tack_portfolio").hide(0);

поставьте скрытие в обработчик завершения анимации.
Опечатался конечно, за 4 секунды, но и 4 секунд не проходит. Скрытие поставил на место.

zebra 29.09.2011 22:20
Вы скрываете див, до того как прошла анимация.
$("#tack_portfolio").animate({"top": "+=400px"}, "4000", function() {
   $("#tack_portfolio").hide(0);
});

BoB 29.09.2011 22:28
Цитата:
Сообщение от zebra (Сообщение 128796)
Вы скрываете див, до того как прошла анимация.
$("#tack_portfolio").animate({"top": "+=400px"}, "4000", function() {
   $("#tack_portfolio").hide(0);
});
А в документации написано по другому
Код:
.animate( properties, [duration,] [easing,] [complete] )

properties A map of CSS properties that the animation will move toward.

duration A string or number determining how long the animation will run.

easing A string indicating which easing function to use for the transition.

complete A function to call once the animation is complete.

zebra 29.09.2011 22:34
По другому это как? :)

BoB 29.09.2011 22:41
Цитата:
Сообщение от zebra (Сообщение 128800)
По другому это как? :)
complete A function to call once the animation is complete.
(Функция вызываемая по окончанию анимации)

melky 29.09.2011 22:42
он сказал вам, в чем ваша ошибка, и написал правильный код.

не так поняли.

BoB 29.09.2011 23:00
Цитата:
Сообщение от melky (Сообщение 128805)
он сказал вам, в чем ваша ошибка, и написал правильный код.

не так поняли.
Не могли бы вы подробнее объяснить в чем ошибка.

Отличие которое я заметил только в удалении типа анимации(easing) и указания вместо элемента (this), ("#tack_portfolio").

zebra 29.09.2011 23:10
Цитата:
Сообщение от BoB
$("#tack_portfolio").animate({"top": "+=400px"}, "4000", 'easeInBack');
$("#tack_portfolio").hide(0);
Cкрипт не будет ждать 4 секунды до завершения анимации, а пойдет просто дальше и вызовет hide. Для того, чтобы знать когда завершится анимация и нужна callback функция

BoB 29.09.2011 23:17
Цитата:
Сообщение от melky (Сообщение 128805)
он сказал вам, в чем ваша ошибка, и написал правильный код.

не так поняли.
Цитата:
Сообщение от zebra (Сообщение 128812)
Cкрипт не будет ждать 4 секунды до завершения анимации, а пойдет просто дальше и вызовет hide. Для того, чтобы знать когда завершится анимация и нужна callback функция
 
$("#tack_portfolio").animate({"top": "+=400px"}, "4000", 'easeInBack',function(){$(this).hide(0);});

Вот это правильно?)

zebra 29.09.2011 23:36
Вроде :-?

BoB 30.09.2011 01:08
Цитата:
Сообщение от zebra (Сообщение 128816)
Вроде :-?
Все понятно, тогда я просто сначала тебя не правильно понял)
Ну а что делать с длительностью анимации и области дивов?

zebra 30.09.2011 01:30
Вопрос непонятен :nono:

BoB 30.09.2011 02:04
Цитата:
Сообщение от zebra (Сообщение 128816)
Вроде :-?
Цитата:
Сообщение от zebra (Сообщение 128823)
Вопрос непонятен :nono:
Я перезалил страничку сайта. Сравните время падения красной кнопки на "портфолио", и время падения желтой на "о нас"

function drop_portfolio() {
	$("#tack_portfolio").animate({"top": "+=400px"}, "1000", 'easeInBack' ,function(){$(this).hide(0);});
	}
function drop_about() {

	$("#tack_about").animate({"top": "+=400px"}, "4000", 'easeInBack',function(){$(this).hide(0);});
}


Прописана 1 секунда, и 4 секунды. Но по факту падают они одинаково. Вопрос почему так происходит?



Если пытаться нажать на фотографии, то они выбираются не на всей области дива, а только на половине.

Например :
-Портфолио - скрипт запускается при нажатии в верхней части, если нажимать под мотоциклами и ниже, то скрипт не работает
-О нас - скрипт запускается при нажатии в верхней части, если нажимать в нижней части, то скрипт не работает

-Услуги - скрипт запускается при нажатии в нижней части, если нажимать в верхней части, то скрипт не работает
-Контакты - скрипт запускается при нажатии в нижней части, если нажимать в верхней части, то скрипт не работает

Почему так?

zebra 30.09.2011 02:34
Столько вопросов... Отвечу только на касающийся анимации: надо передавать в параметр число, а не строку. Дальше сами думайте :nono:

BoB 30.09.2011 02:35
Цитата:
Сообщение от zebra (Сообщение 128829)
Столько вопросов... Отвечу только на касающийся анимации: надо передавать в параметр число, а не строку. Дальше сами думайте :nono:
Все было элементарно и просто)Спасибо!)


Часовой пояс GMT +3, время: 19:27.