Программная анимация

@BrainDamaged · Регистрация: 03.04.2009

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

Реализовал вариант выпадающего меню с помощью списка и css. Начал реализовывать анимацию выпадающего меню и попал в калошу>_<.
Пускай у каждого элемента списка, у которого есть подсписок(то есть подменю), есть свой id.
При наведении на этот элемент, подэлемент(подсписок) медленно выпадает(то есть меняет значение width от 0 до заданного значения), при убирании курсора с элемента - сразу становится свернутым(меняет значение width на 0). В моей реализации понадобился статичный флаг, привязанный к одному подменю, но так как подменюшек может быть много, то я решил сделать все через объектную модель. и тут появились трудности.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//var debug = document.getElementById("output");
function menu_popup(elemId) //определяем класс
{
    this.elem = document.getElementById(elemId);//элемент
    this.forward=true; //флаг
    this.loop = true; //определяем переменную, привязанную к Interval
}
menu_popup.prototype.menu_open = function()
{
    var w = this.elem.clientWidth;
 
    this.loop = clearInterval(this.loop);
    this.elem.style.width = 0 + "px";
    var i=0;
    this.forward=true;
    this.loop = setInterval(function()
    {
        if(i<w && this.forward)
        {
            i+=2;
            this.elem.style.width = i + "px";
        }
        return true;
    }, 4);
}
menu_popup.prototype.menu_close = function()
{
    this.forward=false;
    clearInterval(this.loop);
    this.elem.style.width = 0 + "px";
}
var menu_popup_ex = new menu_popup("test");// "test" - id элемента

Броузер ругается на обращение к свойству this.elem класса menu_popup. Пишет, что

Cannot convert undefined or null to Object

В чем проблема?

@Vanstorm · 07.02.2010, 21:22

Теряется область видимости. Вы вызываете анонимную функцию, тем более с-ю window.setInterval. Ссылка this ссылается не на ваш обьект, а на обьект window/

@BrainDamaged · 07.02.2010, 21:31 **[ТС]**

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

Теряется область видимости. Вы вызываете анонимную функцию, тем более с-ю window.setInterval. Ссылка this ссылается не на ваш обьект, а на обьект window/

и как мне поступить тогда? простите я просто недавно стал изучать объектную модель, подскажите, как мне правильно написать код

пока что я просто тестирую, поэтому работаю просто с divами. ну то есть естьквадратик div , навожу на него мышь - другой див отрабатывает анимацию, убираю мышь - этот див прерывает анимацию

HTML5
1
2
3
<div id="test"></div>
<script type="text/jscript" language="javascript" src="menu.js"></script>
<div id="flag" onmouseover="menu_popup_ex.menu_open()" onmouseout="menu_popup_ex.menu_close()"></div>

@Vanstorm · 08.02.2010, 17:12

вот это уже более конструктивный разговор

Первое что лезет в голову - использование статических переменных или глобальных.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
* {
border:solid;
}
</style>
<div id="test">div</div>
<SCRIPT LANGUAGE="JavaScript">//var debug = document.getElementById("output");
 
function menu_popup(elemId) //îïðåäåëÿåì êëàññ
{
        this.elem = document.getElementById(elemId);//ýëåìåíò
        this.forward=true; //ôëàã
        this.loop = true; //îïðåäåëÿåì ïåðåìåííóþ, ïðèâÿçàííóþ ê Interval
}
menu_popup.currentelement=null;
menu_popup.currentforward=null;
menu_popup.prototype.menu_open = function()
{
        var w = this.elem.clientWidth;
 
        this.loop = clearInterval(this.loop);
        this.elem.style.width = 0 + "px";
        var i=0;
        this.forward=true;
        menu_popup.currentelement=this.elem;
        menu_popup.currentforward=this.forward;
        this.loop = setInterval(function()
        {
                if(i<w && menu_popup.currentforward)
                {
                        i+=2;
                        menu_popup.currentelement.style.width = i + "px";
                }
                return true;
        }, 4);
}
menu_popup.prototype.menu_close = function()
{
        this.forward=false;
        clearInterval(this.loop);
        this.elem.style.width = 0 + "px";
}
var menu_popup_ex = new menu_popup("test");// "test" - id ýëåìåíòà
</SCRIPT>
<div id="flag" onmouseover="menu_popup_ex.menu_open()" onmouseout="menu_popup_ex.menu_close()">lbd</div>

@BrainDamaged · 08.02.2010, 20:41 **[ТС]**

Vanstorm, спасибо, заработало)

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	07.02.2010, 21:22
	Теряется область видимости. Вы вызываете анонимную функцию, тем более с-ю window.setInterval. Ссылка this ссылается не на ваш обьект, а на обьект window/ 0

@BrainDamaged 2 / 2 / 0 Регистрация: 03.04.2009 Сообщений: 44
	08.02.2010, 20:41 [ТС]
	Vanstorm, спасибо, заработало) 0

Опции темы