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

@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;
};

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

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

	Изменение форматирования текста при клике 25.04.2017, 16:39. Показов 832. Ответов 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