Прощай, Мир!
 Аватар для proc3nt
1673 / 831 / 253
Регистрация: 26.05.2012
Сообщений: 3,056

Создать кнопку, по клику на которой заданный элемент на странице будет вести себя определенным образом

07.09.2016, 20:35. Показов 2844. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Создать кнопку, по клику на которой заданный элемент (коричневый квадрат 50*50 пикс) на странице будет вести себя следующим образом (исчезает, появляется на 50 пикселей правее, увеличивается в 2 раза. движется вниз на 100 пикселей. меняет цвет на красный. плавно исчезает

с помощью jQuery. в правильном ли направлении я двигаюсь? как сделать исчезновение?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>                                                                  
<head>  
    <style type="text/css">
        #square 
        {
                width: 50px;
                height: 50px;
                background: brown;
        }
    </style>                                                             
    <script type="text/javascript" src="E:\\jquery-3.1.0.js"></script>
 
    <script type="text/javascript">
        $("#btn").click(function(){
        $("#square").hide();
        });
    </script>                                                          
</head>
<body> 
    <div id="square"></div>
    <input type="button" id="btn" value="Press!">
</body>
</html>
Добавлено через 27 минут
вроде сделал исчезновение. как теперь сделать появление на 50 пикселей правее?
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
<html>                                                                  
<head>  
    <style type="text/css">
        #square 
        {
                width: 50px;
                height: 50px;
                background: brown;
        }
    </style>
                                                             
    <script type="text/javascript" src="E:\\jquery-3.1.0.js"></script>                                                         
</head>
<body> 
    <div id="square"></div>
    <input type="button" value="Press!">
 
    <script type="text/javascript">
        $("input").click(function(){
        $("#square").hide();
        });
    </script> 
</body>
</html>
Добавлено через 40 минут
сделал на 50 пикселей правее и увеличение в два раза. теперь бы мне движение вниз на 100 пикселей
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
<html>                                                                  
<head>  
    <style type="text/css">
        #square 
        {
                width: 50px;
                height: 50px;
                background: brown;
        }
    </style>
                                                             
    <script type="text/javascript" src="E:\\jquery-3.1.0.js"></script>                                                         
</head>
<body> 
    <div id="square"></div>
    <input type="button" value="Press!">
 
    <script type="text/javascript">
        $("input").click(function(){
        $("#square").hide();
        $("#square").css({"margin-left": "50"});
        $("#square").show();
        $("#square").css({"width": "100"});
        $("#square").css({"height": "100"});
        });
    </script> 
</body>
</html>
Добавлено через 31 минуту
все. сделал сам. можно любоваться
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
33
34
<html>                                                                  
<head>  
    <style type="text/css">
        #square 
        {
                width: 50px;
                height: 50px;
                background: brown;
        }
    </style>
                                                             
    <script type="text/javascript" src="E:\\jquery-3.1.0.js"></script>                                                         
</head>
<body> 
    <form>
    <input type="button" value="Press!">
    </form>
 
    <div id="square"></div> 
 
    <script type="text/javascript">
        $("input").click(function(){
        $("#square").hide();
        $("#square").css({"margin-left": "+=50"});
        $("#square").show();
        $("#square").css({"width": "100"});
        $("#square").css({"height": "100"});
        $("#square").animate({"margin-top": "+=100"},"slow");
        $("#square").css({"background": "red"});
        $("#square").fadeTo("slow",0);
        });
    </script> 
</body>
</html>
Добавлено через 5 минут
только поясните мне почему квадрат окрашивается в красный цвет сразу же после увеличения, а не позже после его окончания движения вниз?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
07.09.2016, 20:35
Ответы с готовыми решениями:

сделать кнопку на сайте, по клику которой будет генерироваться уникальный id(код)
Дамы и господа, прошу вашей помощи! Нужно сделать кнопку на сайте, по клику которой будет генерироваться уникальный id(код) и выплывать...

Как будет себя вести на оси координат домик по формуле y=1+z^2
помогите с кодом проги которая будет расчитывать как будет вести себя домик на оси координат по формуле y= 1+z^2(комплексная форма)

Как будет себя вести на оси координат домик по формуле y=1+z^2
помогите написать прогу которая показывает как будет вести себя домик на оси координат по формуле y=1+z^2 (в комплексной форме)

1
 Аватар для Takitsukerarete
15 / 15 / 13
Регистрация: 25.12.2015
Сообщений: 55
11.09.2016, 06:06
Если хотите, чтобы цвет давался после ресайза, то сделайте переменную для активации смены цвета. Суть в том, чтобы провести проверку на наличие предыдущего стиля:
JavaScript
1
if($('#square').css('?'=='?') $("#square").css('background','red');
вместо ? стиль и значение.
И да, писать можно проще, чем:
JavaScript
1
({"background": "red"});
так:
JavaScript
1
('background','red');
Если уж используете {}, то можно было бы:
JavaScript
1
2
$("#square").css({"width": "100"});
$("#square").css({"height": "100"});
заменить на:
JavaScript
1
$('#square').css({'width':'100','height':'100'});
Если не хотите так, то можно было:
JavaScript
1
$('#square').css('width','100').css('height','100');
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
11.09.2016, 06:06
Помогаю со студенческими работами здесь

создать кнопку, по щелчку которой будет рисоваться шестиугольник.
В общем пишем мы простенький графический редактор, сказали создать кнопку, по щелчку которой будет рисоваться шестиугольник. Я бьюсь в...

Как написать программу, которая каждый раз будет вести себя по-разному
В общем в 2 словах о себе- немного программировал очень много лет тому назад, работая в научной лаборатории. Программы были самые простые с...

Создать матрицу 11*11, в которой каждый элемент следующим образом зависит от индексов
3. Создать матрицу 11*11, в которой каждый элемент следующим образом зависит от индексов i^2+j, где i - номер строки, j - номер столбца. ...

Создать кнопку, при нажатии которой будет определен день недели для введенной даты
Я делаю так: Private Sub Êíîïêà_Click() Dim d As String d = InputBox(&quot;Ââåäèòå äàòó&quot;) Select Case d Case 1 Me.Íåäåëÿ.Caption =...

Нужно через форму создать кнопку, желательно с помощью картинки, нажатие по которой будет делать выборку из таблицы БД
Задача. Нужно через форму создать кнопку, желательно с помощью картинки, нажатие по которой будет делать выборку из таблицы БД. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

Новые блоги и статьи
Валидация и контроль данных табличной части документа перед записью
Maks 22.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .
Отчёт о затраченных материалах за определенный период с макетом печатной формы
Maks 21.04.2026
Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru