Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Внимание! Есть замечания модератора по теме: Вопрос решен.\nТема закрыта
Старый 11.02.2014, 18:41   #1
Danik25
Новичок
Джуниор
 
Регистрация: 11.02.2014
Сообщений: 5
По умолчанию Эффект при наведении (jQuery)

Установил скрипт эффекта затемнения объектов в шапку -
Код:
<script>
jQuery(function(){
$("#button").hover(function(){
$(this).stop().animate({opacity:'2.0'})},
function(){$(this).stop().animate({opacity:'.3'})}
);
});
</script>
<style>
#button img{opacity:.2;filter:alpha(opacity=30)}
</style>
Он работает, но проблема в том, что не сразу. Пока ты не наведешь курсором на объект, скрипт к нему (объекту) почему-то не подключается (т.е. пока не наведешь курсор, ни затемнение ни анимация не работают). Может я его поставил не туда или переменную какую-то добавить нужно?
Я думал сделать его через css, но к сожалению не имею достаточно знаний как это сделать
Danik25 вне форума Ответить с цитированием
Старый 11.02.2014, 18:48   #2
Streletz
Старожил
 
Регистрация: 03.01.2014
Сообщений: 2,870
По умолчанию

Цитата:
Пока ты не наведешь курсором на объект, скрипт к нему (объекту) почему-то не подключается (т.е. пока не наведешь курсор, ни затемнение ни анимация не работают). Может я его поставил не туда
Неверно выбрано событие, которому скрипт назначен в качестве обработчика.
Цитата:
Я думал сделать его через css, но к сожалению не имею достаточно знаний как это сделать
Вот похожая тема по части CSS: transition в css.
Streletz вне форума Ответить с цитированием
Старый 11.02.2014, 19:27   #3
MaTBeu
Eclipse Foundation
Старожил
 
Аватар для MaTBeu
 
Регистрация: 19.09.2007
Сообщений: 2,619
По умолчанию

Цитата:
Сообщение от Danik25 Посмотреть сообщение
Установил скрипт эффекта затемнения объектов в шапку -
Код:
<script>
jQuery(function(){
$("#button").hover(function(){
$(this).stop().animate({opacity:'2.0'})},
function(){$(this).stop().animate({opacity:'.3'})}
);
});
</script>
<style>
#button img{opacity:.2;filter:alpha(opacity=30)}
</style>
Он работает, но проблема в том, что не сразу. Пока ты не наведешь курсором на объект, скрипт к нему (объекту) почему-то не подключается (т.е. пока не наведешь курсор, ни затемнение ни анимация не работают). Может я его поставил не туда или переменную какую-то добавить нужно?
Я думал сделать его через css, но к сожалению не имею достаточно знаний как это сделать
Вы повесили обработчик на событие hover (наведение), и ожидаете, что обработчик сработает без наведения.

Объясните, что вам конкретно нужно в плане эффектов?
MaTBeu вне форума Ответить с цитированием
Старый 11.02.2014, 21:45   #4
Danik25
Новичок
Джуниор
 
Регистрация: 11.02.2014
Сообщений: 5
По умолчанию

Цитата:
Сообщение от MaTBeu Посмотреть сообщение
Вы повесили обработчик на событие hover (наведение), и ожидаете, что обработчик сработает без наведения.

Объясните, что вам конкретно нужно в плане эффектов?
Мне нужно чтобы при входе на сайт, элементы, на которые распространяется этот скрипт, УЖЕ были под этим эффектом, т.е с указанной мной прозрачностью (opacity) и с рабочей анимацией. Т.к сейчас он работает так - я захожу на сайт, а скрипт будто не активирован, и чтобы это сделать, мне сначало нужно навести курсор на элемент (в моём случае картинку) и убрать его. Только после этих манипуляций картинка принимает эффект прозрачности и анимация начинает работать. Надеюсь понятно объяснил. Если же нет, могу кинуть сам сайт.
Danik25 вне форума Ответить с цитированием
Старый 12.02.2014, 19:16   #5
MaTBeu
Eclipse Foundation
Старожил
 
Аватар для MaTBeu
 
Регистрация: 19.09.2007
Сообщений: 2,619
По умолчанию

Цитата:
Сообщение от Danik25 Посмотреть сообщение
Мне нужно чтобы при входе на сайт, элементы, на которые распространяется этот скрипт, УЖЕ были под этим эффектом, т.е с указанной мной прозрачностью (opacity) и с рабочей анимацией. Т.к сейчас он работает так - я захожу на сайт, а скрипт будто не активирован, и чтобы это сделать, мне сначало нужно навести курсор на элемент (в моём случае картинку) и убрать его. Только после этих манипуляций картинка принимает эффект прозрачности и анимация начинает работать. Надеюсь понятно объяснил. Если же нет, могу кинуть сам сайт.
Насколько я понял, вам нужна анимация при отображении страницы. В таком случае вы написали совсем неправильно.

Вот так сработает
Код:
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#button").hover(function(){
      $(this).stop().animate({opacity:'2.0'})},
         function(){$(this).stop().animate({opacity:'.3'})
      }
   );
   
   $("#button").trigger("hover"); // вызываем событие без наведения мыши
});
</script>
MaTBeu вне форума Ответить с цитированием
Старый 12.02.2014, 20:50   #6
Danik25
Новичок
Джуниор
 
Регистрация: 11.02.2014
Сообщений: 5
По умолчанию

Цитата:
Сообщение от MaTBeu Посмотреть сообщение
Насколько я понял, вам нужна анимация при отображении страницы. В таком случае вы написали совсем неправильно.

Вот так сработает
Код:
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#button").hover(function(){
      $(this).stop().animate({opacity:'2.0'})},
         function(){$(this).stop().animate({opacity:'.3'})
      }
   );
   
   $("#button").trigger("hover"); // вызываем событие без наведения мыши
});
</script>
Спасибо за помощь. Но возможно вы меня не поняли, если не трудно, зайдите пожалуйста на сайт, извиняюсь если так делать нельзя, я не нашел, как отправить вам сообщение в ЛС. Прежде чем наводить курсор на красную кнопку, запомните её интенсивность, после этого наведите и уберите курсор. Вы заметите что она стала прозрачней, т.е. скрипт начинает работать на эту кнопку только после того, как я наведу курсором на этот объект. (Сделал для Вас 2 кнопки, на одной скрипт будет работать, на второй нет)
P.S. Возможно я просто вывожу на сайт это не правильно. Я делаю это с помощью кода -
Код:
<a id="button" target="_blank" href="ссылка на YouTube"></a>
т.к. с этим кодом работает ссылка, на которую я хочу отправить посетителя.
Пробовал и через
Код:
<div id="button">
<a href="ссылка на YouTube" target="_blank" alt="YouTube"></a>
    </div>
Но тут ссылка уже не работает.

P.S.S. Может вы еще подскажете с помощь какого кода эти две кнопки на одной строке сделать?

Последний раз редактировалось Danik25; 12.02.2014 в 20:59.
Danik25 вне форума Ответить с цитированием
Старый 13.02.2014, 16:09   #7
MaTBeu
Eclipse Foundation
Старожил
 
Аватар для MaTBeu
 
Регистрация: 19.09.2007
Сообщений: 2,619
По умолчанию

Если вам нужно сразу затенить кнопку - сделайте стиль и скрипт

Стиль
Код:
#button {
   opacity: .3;
}
Скрипт
Код:
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#button").hover(function(){
      $(this).stop().animate({opacity:'2.0'})},
         function(){$(this).stop().animate({opacity:'.3'})
      }
   );
});
</script>
На одной строке можно сделать следующим стилем (заменить существующий)
Код:
.wr1 {
   width: 900px;
   margin: 0 auto;
   overflow: hidden;
}

#button,
#button1 {
   float: right;
   width: 90px;
   height: 90px;
   background: transparent url(/YT_off.png) center center no-repeat;
}

Последний раз редактировалось MaTBeu; 13.02.2014 в 16:12.
MaTBeu вне форума Ответить с цитированием
Старый 13.02.2014, 18:07   #8
Danik25
Новичок
Джуниор
 
Регистрация: 11.02.2014
Сообщений: 5
По умолчанию

Это именно то, что я и хотел! Огромнейшее спасибо
Danik25 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение при наведении и при нажатии Danik25 HTML и CSS 0 11.02.2014 18:38
JQUERY UI - эффект Minus_yu JavaScript, Ajax 2 28.04.2012 01:54
Интересный эффект при двух сетевых картах rpy3uH Операционные системы общие вопросы 3 25.11.2011 13:50
Эффект выделения input типа text при нажатиии ZvEr_HaCkEr HTML и CSS 2 09.07.2011 15:41
img при наведении Иванна HTML и CSS 3 04.04.2011 20:03