Увеличение блока при наведении на другой

@Master_Yi · Регистрация: 22.12.2013

Студворк — интернет-сервис помощи студентам

Есть скрипт, который должен увеличивать один блок на странице. Нормальный его вариант должен работать на JQuerry но я его не знаю как работать с ним так что у меня свой, корявый, вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
var i;
    $('.zoom').hover(function(){
setTimeout(function(){
for (i=40; i<=400; i++) {
            $(document).getElementsByClassName('toperl')[0].style.height="i";}
        },
        function(){
            for (i=400; i<=40; i--) {
            $(document).getElementsByClassName('toperl')[0].style.height="i";}
        }, 1000); }
)});

Но он не работает из-за ошибки:
Uncaught TypeError: undefined is not a function
Что есть это строчкой:

JavaScript
1
            $(document).getElementsByClassName('toperl')[0].style.height="i";}

Как исправить?
Очень благодарен за внимание!

@ludmila-sv · 19.10.2014, 17:08

1) Вот это

JavaScript
1
$(document).getElementsByClassName('toperl')[0]

надо записать так

JavaScript
1
$('.toperl').eq(0)

2) У Вас путаница с hover и setTimeout. Правильнее так:

JavaScript
1
2
3
4
5
6
7
8
$('.zoom').hover(
    function(){
    setTimeout(function(){...},1000);
                },
    function(){
    setTimeout(function(){...},1000);
                }
);

3) Но и это, как я понимаю, совсем не то, что Вы имели в виду. Потому что тут задается лишь отсрочка выполнения цикла for, а сам цикл выполнится мгновенно. Вам нужен, скорее, setInterval , через равные промежутки времени запускающий функцию, которая увеличивает height на сколько-то рх. Как только height достигнет определенной величины - clearInterval.

Добавлено через 3 минуты
4) И вместо .style.height="i" - .css("height", i)
Да, и кстати, если Вы приравниваете высоту значению переменной i, не надо писать i в кавычках.

@Master_Yi · 19.10.2014, 18:30 **[ТС]**

Боги, сколько правил! Спасибо!

Добавлено через 1 час 5 минут
Эх.. Проблемы все-таки не решены...
Записал я код :

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
var i;
$('.zoom').hover(
    function(){
    setTimeout(function(){for (i=-170; i<=0; i++)$('.toperl').eq(0).css("margin-top", i)},1000);
                },
    function(){
    setTimeout(function(){for (i=0; i>=-170; i--)$('.toperl').eq(0).css("margin-top", i)},1000);
                }
);}

По идее без второй функции(которая по идее должна возвращать блок в исходное состояние) оно должно работать и изменять маргин-топ за нужное время.

Еще раз, мое задание таково: у меня есть блок с данными, часть блока торчит изначально а остальное спрятано за пределами экрана, и при наведении на видимую часть - невидимая должна вылезти из-за пределов экрана за заданное время.
Я знаю что в JQuerry есть подходящая функция для этого, но я как минимум но помню какая... Как же мне все-таки анимировать такой выезд блока?
А так же я впервые в жизни вижу что-то такое:

Сообщение от ludmila-sv

$('.toperl').eq(0)

Что это и как оно работает? о_О

@ludmila-sv · 19.10.2014, 18:44

Сообщение от Master_Yi

Что это и как оно работает? о_О

$('.toperl') - это выбор всех элементов с классом toperl
.eq(0) - это выбор первого элемента в группе найденных ранее.

Сообщение от Master_Yi

Еще раз, мое задание таково: у меня есть блок с данными, часть блока торчит изначально а остальное спрятано за пределами экрана, и при наведении на видимую часть - невидимая должна вылезти из-за пределов экрана за заданное время.
Я знаю что в JQuerry есть подходящая функция для этого, но я как минимум но помню какая... Как же мне все-таки анимировать такой выезд блока?

А, ну да. setInterval не нужен, как и setTimeout, в jQuery же есть animate.

JavaScript
1
$("#my-div-1").animate({marginTop: "170px"}, 1000);

Добавлено через 3 минуты
Анимация на jQuery

@Master_Yi · 19.10.2014, 19:49 **[ТС]**

ludmila-sv, Ясно, спасибо.
Оно заработало, но не совсем так как нужно. Из-за этого еще один вопрос:
Почему оно так затормаживается перед тем как начать выводить(после чего и прятать) блок?
Тоесть перед тем как начать выдвигать мое меню проходит 1-2 секунды, и при not hover так же..

Я менял цифры в конце функции animate, но при их изменении вообще ничего не меняется. А так же я хотел бы знать, это важно что бы в будущем сюда не ходить хотя бы по этой теме, так вот, я бы хотел знать как регулировать эту задержку перед началом ивента, и при его завершении(или обратным ивентом, например, закрытие), ну и почему изменение времени анимации ничего не делает.
Прилагаю код:

JavaScript
1
2
3
4
5
6
var i;
$('.zoom').hover(function(){
$("#my-div-1").animate({marginTop: "0px"}, 0)},
function() {
$("#my-div-1").animate({marginTop: "-170px"}, 0)}
);

@ludmila-sv · 19.10.2014, 20:18

Почему затормаживается - не знаю, вроде, не должно.
Т.е. в jQuery есть delay, но тут это ни при чем.

Чтобы была видна разница в скорости, цифры надо менять сильно - например, 1000 на 5000, это же миллисекунды. Это не задержка перед началом анимации, а скорость анимации.

Может, Вам больше .slideDown() .slideUp() подойдет?

@Master_Yi · 19.10.2014, 23:21 **[ТС]**

ludmila-sv, Это очень важно.
Как я понял - SlideUp и Down изменяют высоту блока, это очень плохо, мне нужны маргины.
А на счет лагов:

Не работает вставка с ютуба, вот ссылка прямая:
http://youtu.be/xC1fb6GCzXo
Не поленился и записал это, я не понимаю в чем проблема..

Добавлено через 1 час 53 минуты
В общем перенес я скрипт в другой файл, где ничего побочного нет, там все почти нормально работает, почти ибо теперь очень мешает "запоминание". Когда пройдешься по блоку много раз - оно запоминает и начинает выполнять действия с анимацией по очереди. Это можно как-то исправить?

Добавлено через 37 минут
Тяжкими усилиями я понял как и убрать это запоминание. Всем спасибо за внимание!

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	19.10.2014, 20:18
	Почему затормаживается - не знаю, вроде, не должно. Т.е. в jQuery есть delay, но тут это ни при чем. Чтобы была видна разница в скорости, цифры надо менять сильно - например, 1000 на 5000, это же миллисекунды. Это не задержка перед началом анимации, а скорость анимации. Может, Вам больше .slideDown() .slideUp() подойдет? 1

@Master_Yi 13 / 10 / 3 Регистрация: 22.12.2013 Сообщений: 378
	19.10.2014, 23:21 [ТС]
	ludmila-sv, Это очень важно. Как я понял - SlideUp и Down изменяют высоту блока, это очень плохо, мне нужны маргины. А на счет лагов: Не работает вставка с ютуба, вот ссылка прямая: http://youtu.be/xC1fb6GCzXo Не поленился и записал это, я не понимаю в чем проблема.. Добавлено через 1 час 53 минуты В общем перенес я скрипт в другой файл, где ничего побочного нет, там все почти нормально работает, почти ибо теперь очень мешает "запоминание". Когда пройдешься по блоку много раз - оно запоминает и начинает выполнять действия с анимацией по очереди. Это можно как-то исправить? Добавлено через 37 минут Тяжкими усилиями я понял как и убрать это запоминание. Всем спасибо за внимание! 0