Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 2
Регистрация: 31.12.2014
Сообщений: 226

Применить hover эффект сразу к двум классам, но с разными значениями

30.03.2016, 21:12. Показов 914. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем доброго времени суток, помогите пожалуйста разобраться, как применить hover эффект к двум классам но с разными значениями, как можно сделать это покороче и можно ли? Заранее спасибо
Вот код:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 $(function(){
    $('.previous').hover(function(){
      $(this).children('img').stop(true,true)
            .animate({width:"26px",height:"51px",left:"-6px",top:"3"}, 100)},
        function(){
    $(this).children('img').stop(true,true)
        .animate({width:"24px",height:"47px",left:"0",top:"0"}, 100);
    }); 
    $('.next').hover(function(){
      $(this).children('img').stop(true,true)
            .animate({width:"26px",height:"51px",left:"6px",top:"-3"}, 100)},
            function(){
    $(this).children('img').stop(true,true)
        .animate({width:"24px",height:"47px",left:"0",top:"0"}, 100);
            });
  });
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
30.03.2016, 21:12
Ответы с готовыми решениями:

Не удается применить к двум классам одновременно
$('.yved .pr').addClass('noneyv0'); Не работает, необходимо за раз добавить класс к двум блокам.

Как применить скрипт ко всем классам
Здравствуйте, подскажите как можно применить скрипт ко всем классам на странице одновременно, не писать же мне под каждый отдельный id -...

Hover эффект
Есть вот такой кусок кода https://jsfiddle.net/destroer18/zyat0pz2/, когда картинка отъезжает в сторону, нужно сделать проявление градиента...

2
Hello Kitty
 Аватар для WhiteMind
690 / 562 / 402
Регистрация: 12.02.2016
Сообщений: 1,436
Записей в блоге: 1
31.03.2016, 07:46
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 $(function(){
        var previous = {width:"26px",height:"51px",left:"-6px",top:"3"};
        var next = {width:"26px",height:"51px",left:"6px",top:"-3"};
        var end = {width:"24px",height:"47px",left:"0",top:"0"};
        var time = 100;
        $(".previous, .next").hover(function() {
            var a = previous;
            if ( $(this).hasClass('next') ) {
                var a = next;
            }
        $(this).children('img').stop(true,true).animate(a, time);
        }, function() {
        $(this).children('img').stop(true,true).animate(end, time);
        }); 
});
Добавлено через 39 секунд
https://jsfiddle.net/zdc3tvan/3/
1
0 / 0 / 2
Регистрация: 31.12.2014
Сообщений: 226
03.04.2016, 15:57  [ТС]
WhiteMind, Спасибо, очень помогли
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
03.04.2016, 15:57
Помогаю со студенческими работами здесь

Реализовать Hover эффект
Всем привет, чего то подтупливаю я и не могу реализовать вроде бы простой эффект. См имагу. Обычный блок картико а ниже текст, при...

Hover эффект внутри
Здравствуйте! Забыл как сделать hover эффект всем элементам внутри div'a. Приведу пример кода. <a href=""> ...

Эффект а hover на картинке
Здравствуйте. http://********/823gb1atajln2O -- как сделать такой эффект?

Исправить hover эффект?
Доброго времени суток есть вот такой кусок кода https://jsfiddle.net/b9m08jvg/ Можно ли сделать так что бы hover эффект срабатывал только...

Про transition и hover эффект
Есть следующий код <li> <div class="dark-img"> <h1>LUX ROOM</h1> <button onclick="location.href='#'">BOOK IT</button> ...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики.
Hrethgir 07.04.2026
Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума
kumehtar 07.04.2026
Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами
Maks 07.04.2026
1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru