Изменение форматирования текста при клике

@nbolgow · Регистрация: 25.04.2017

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

Здравствуйте. Будьте добры, подскажите. Есть такой хид сайта:
s018.radikalТОЧКАru/i519/1704/43/622b47df69a4.png

Нужно чтобы при клике на пункт "Контакты" та часть сверху, где указаны контактные данные, выделялась на пару секунд. То есть текст немного подтрясывался, становился жирным и т.п.
Ранее видел такое в других шаблонах, но к сожалению не помню в каких...
Буду крайне признателен, спасибо!

@Уф · 25.04.2017, 16:52

песочница

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};
 
$('#contacts').click(function(){
    $(this).shake(2,3,500);
})

HTML5
1
2
3
4
5
<div id="contacts">
Phone: 123-456-777<br>
E-Mail: exaple@domain.com<br>
Adress: Moscow, Pushkina st, 1
</div>

@nbolgow · 25.04.2017, 17:01 **[ТС]**

Это при клике на сам текст, а нужно чтобы при клике по пункту меню такое же происходило со сторонним текстом в вверхней части.

@Уф · 25.04.2017, 17:14

JavaScript
1
2
3
$('#kakoi_to_drugoy_block').click(function(){
    $('#contacts').shake(2,3,500);
})

@nbolgow · 25.04.2017, 17:24 **[ТС]**

1. Не срабатывает.
2. Когда добавляю див в меню, пункт отображается совсем не там, где должен быть.
Я далеко не специалист в JS, но код выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
                <div class="widget  widget-icon-box">   
                    <div class="icon-box">
                        <i class="fa fa-home fa-3x"></i>
                        <div class="icon-box__text">
                            <h4 class="icon-box__title">Адрес</h4>
                            <span class="icon-box__subtitle">Адрес</span>
                        </div>
                    </div>
                </div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
    
    <div class="container">
            <div class="navigation">
                <div class="collapse  navbar-collapse" id="buildpress-navbar-collapse">
                    <ul id="menu-main-menu" class="navigation--main">
                        <li class="current-menu-item"><a href="">Главная</a></li>
                        <li><a href="#about">О компании</a></li>
                        <li><a href="#project">Проекты</a></li>
                        <li><a href="#ot">Презентация</a></li>
                        <li><a href="#price">Стоимость работ</a></li>
                        <li><a href="#">Контакты</a></li></ul>  </div>
            </div>
        </div>

То есть при клике на "Контакты" из второго кода должен "трястись" первый код. Как-то так

@Уф · 25.04.2017, 17:35

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
                <div class="widget  widget-icon-box" id="shake_me">   
                    <div class="icon-box">
                        <i class="fa fa-home fa-3x"></i>
                        <div class="icon-box__text">
                            <h4 class="icon-box__title">Адрес</h4>
                            <span class="icon-box__subtitle">Адрес</span>
                        </div>
                    </div>
                </div>
 
    
    <div class="container">
            <div class="navigation">
                <div class="collapse  navbar-collapse" id="buildpress-navbar-collapse">
                    <ul id="menu-main-menu" class="navigation--main">
                        <li class="current-menu-item"><a href="">Главная</a></li>
                        <li><a href="#about">О компании</a></li>
                        <li><a href="#project">Проекты</a></li>
                        <li><a href="#ot">Презентация</a></li>
                        <li><a href="#price">Стоимость работ</a></li>
                        <li><a href="#" onClick='$("#shake_me").shake(2,3,500);'>Контакты</a></li></ul>  </div>
            </div>
        </div>

функцию только не забудь воткнуть и проверь подключен ли jquery

@nbolgow · 25.04.2017, 18:04 **[ТС]**

Все сработало, низкий поклон

А можно к этому эффекту добавить выделение текста?) Чтобы добавлялся bold

@Уф · 25.04.2017, 21:49

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
    var t = this;
    $(t).css({"position":"relative","font-weight":"bold"}); 
    this.each(function() {
     for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
               .animate({left:intDistance}, ((intDuration/intShakes)/2))
               .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
 
  setTimeout(function(){$(t).css({"font-weight":"normal"});}, intDuration+100);
  return this;
};

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	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 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@nbolgow 0 / 0 / 0 Регистрация: 25.04.2017 Сообщений: 4

	Изменение форматирования текста при клике 25.04.2017, 16:39. Показов 807. Ответов 7 Метки нет (Все метки) Здравствуйте. Будьте добры, подскажите. Есть такой хид сайта: s018.radikalТОЧКАru/i519/1704/43/622b47df69a4.png Нужно чтобы при клике на пункт "Контакты" та часть сверху, где указаны контактные данные, выделялась на пару секунд. То есть текст немного подтрясывался, становился жирным и т.п. Ранее видел такое в других шаблонах, но к сожалению не помню в каких... Буду крайне признателен, спасибо! 0

@nbolgow 0 / 0 / 0 Регистрация: 25.04.2017 Сообщений: 4
	25.04.2017, 17:01 [ТС]
	Это при клике на сам текст, а нужно чтобы при клике по пункту меню такое же происходило со сторонним текстом в вверхней части. 0

@nbolgow 0 / 0 / 0 Регистрация: 25.04.2017 Сообщений: 4
	25.04.2017, 18:04 [ТС]
	Все сработало, низкий поклон А можно к этому эффекту добавить выделение текста?) Чтобы добавлялся bold 0