Плавная замена фона ссылки

@TheTopMisha · Регистрация: 28.09.2019

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

Есть код. Нужно чтобы по клике на ссылку, его картинка ПЛАВНО поменялась на другую. Сейчас у меня это происходит с морганием, но работает. Необходимо добавить плавную анимацию. Кроме того, создал функцию чтобы по 1 клику на div class="literature" показывался блок, а по 2 клику он скрывался

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="main">
            <div class="button">
                <a class="btn1" href="#"><img id="btn1" src="img/btn1_active.png"></a>
                <a class="btn2" href="#"><img id="btn2" src="img/btn2.png"></a>
                <a class="btn3" href="#"><img id="btn3" src="img/btn3.png"></a>
            </div>
 
            <div class="tex1">
                <img id="description" src="img/btn1_text.png">
            </div>
        <div class="literature">
            <a class="authors" href="#box" onclick="openbox('box'); return false">
                                <img id="search" src="img/button_list.png" style="display: block">
                                <img id="fax" src="img/list_popup.png" style="display: none"> 
                         </a>
        </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.button{
    width: 856px;
    display: block;
    margin-left: 75px;
    margin-bottom: 27px;
}
.tex1{
    margin:53px 78px 0 0;
}
.literature{
    position: absolute;
    bottom: 0;
    right: 0;
}
#fax{
    display: none;
}

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
35
36
37
38
39
40
41
var block1 = document.getElementById('btn2');
    block1.onclick = function () {
        document.getElementById("btn1").src="img/btn1.png";
        document.getElementById("btn2").src="img/btn2_active.png";
        document.getElementById("btn3").src="img/btn3.png";
        document.getElementById("description").src="img/btn2_text.png";
        document.getElementById('fax').style.display = "none";
        document.getElementById('search').style.display = "block";
    }
    
    var block2 = document.getElementById('btn1');
    block2.onclick = function () {
        document.getElementById("btn1").src="img/btn1_active.png";
        document.getElementById("btn2").src="img/btn2.png";
        document.getElementById("btn3").src="img/btn3.png";
        document.getElementById("description").src="img/btn1_text.png";
        document.getElementById('fax').style.display = "none";
        document.getElementById('search').style.display = "block";
    }
 
    var block3 = document.getElementById('btn3');
    block3.onclick = function () {
        document.getElementById("btn3").src="img/btn3_active.png";
        document.getElementById("btn2").src="img/btn2.png";
        document.getElementById("btn1").src="img/btn1.png";
        document.getElementById("description").src="img/btn3_text.png";
        document.getElementById('fax').style.display = "none";
        document.getElementById('search').style.display = "block";
    }
 
 
function openbox(box){
    display = document.getElementById('fax').style.display;
    if (display == "none") {
        document.getElementById('fax').style.display = "block";
        document.getElementById('search').style.display = "none";
    } else {
        document.getElementById('fax').style.display = "none";
        document.getElementById('search').style.display = "block";
    }
}

@TheTopMisha · 04.01.2020, 21:51 **[ТС]**

Для наглядности скрины того что должно получиться

@Jener · 07.01.2020, 17:55

PHP/HTML
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--<link rel="stylesheet" href="style.css">-->
    <style>
        .box-btn {
            width: 40%;
            position: absolute;
            z-index: 0;
            margin-top: 210px;
        }
 
        .btn {
            margin: 30px;
            margin-bottom: 55px;
            background: lightgreen;
            border: 2px solid black;
            border-radius: 25px;
            text-align: center;
            height: 40px;
            width: 250px;
            box-shadow: 10px 5px 5px;
        }
 
        .box-msg {
            position: absolute;
        }
 
        .click {
            background: #f4a776;
            position: relative;
            left: 10px;
            top: 5px;
            box-shadow: 0 0;
        }
 
    </style>
</head>
 
<body>
    <div class="box-btn">
        <div class="btn">кнопка 1</div>
        <div class="btn">кнопка 2</div>
        <div class="btn">кнопка 3</div>
    </div>
 
    <div class="box-msg">
        <img src="https://www.cyberforum.ru/attachments/1101204d1578163866" alt="">
    </div>
    <div class="box-msg">
        <img src="https://www.cyberforum.ru/attachments/1101205d1578163866t" alt="">
    </div>
    <div class="box-msg">
        <img src="https://www.cyberforum.ru/attachments/1101206d1578163866t" alt="">
    </div>
 
    <script>
        let button = document.getElementsByClassName('btn');
        let message = document.getElementsByClassName('box-msg');
 
        let z = 1;
        for (let item of message) {
            item.style.opacity = 1;
            item.style.zIndex -= z;
            z++;
        };
 
        for (let i = 0; i < button.length; i++) {
            button[i].onclick = () => {
                button[i].classList.add('click');
                setTimeout(() => {
                    button[i].classList.remove('click');
                }, 200);
 
                for (let j = 0; j < message.length; j++) {
                    if (i == j) {
                        for (let k = 1; k < 10000; k++) {
                            setTimeout(() => {
                                message[j].style.opacity = 0.0001 * k;
                                //message[z_op].style.opacity = 1 - 0.0001 * k;
                            }, 400);
                        }
                    } else {
                        message[j].style.opacity = 0;
                    }
                }
            }
        }
 
    </script>
    <!--<script src="javascript.js"></script>-->
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@TheTopMisha 2 / 2 / 0 Регистрация: 28.09.2019 Сообщений: 57
	04.01.2020, 21:51 [ТС]
	Для наглядности скрины того что должно получиться Миниатюры 0

Плавная замена фона ссылки

Решение