Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2016, 11:43
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

События мыши
Задача: при наведении мыши на объект запускается анимация (на jq)
при убирании мыши анимация возвращается к первоначальному виду.
Что лучше использовать для обработки события мыши? простой hover или mouseover/mouseout
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2016, 12:22
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от ghost666 Посмотреть сообщение
hover или mouseover/mouseout
это одно и тоже
Ответить с цитированием
  #3 (permalink)  
Старый 10.10.2016, 12:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ghost666
простой hover или mouseover/mouseout
в порядке приоритета лучше css :hover!!!
mouseenter/mouseleave или hover
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2016, 16:53
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

спасибо!
а как вернуть все обратно при убирании мыши
вот код
$('#webd').hover(function(){
    startTween();
});

function startTween(){
    var d = 0;

    TweenLite.to($("#webd-arrl"),0.1, {delay:d, x: -3});
    TweenLite.to($("#webd-arrr"),0.1, {delay:d, x: 3});
    TweenLite.to($("#webd-line"),0.1, {delay:d, opacity: 0});
    TweenLite.to($("#webd-html"),0.1, {delay:d, opacity: 1});
    TweenLite.to($("#htm"),0.5, {delay:d+0.2, x: 64});
    TweenLite.to($("#men"),0.5, {delay:d+0.4,  x: 42});

}
Ответить с цитированием
  #5 (permalink)  
Старый 10.10.2016, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ghost666,
написать function resetTween() и добавить
$('#webd').hover(startTween, resetTween);
Ответить с цитированием
  #6 (permalink)  
Старый 11.10.2016, 02:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

TweenLite hover
ghost666,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .hot{
         box-sizing: border-box;
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
         margin: 70px auto; color : #FFFFFF;
    }

  #photo{
    background-color: #FF00FF; width: 87px;
  height: 87px;

  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
  <script>
$(function() {
    var tween = TweenLite.to("#photo", 2, {
        width: "300px",
        height: "300px",
        opacity: 0,
        x: -100,
        y: -100,
        "font-size" : 45,
        paused:true
    });

    function startTween() {
        tween.play()
    }

    function resetTween() {
        tween.reverse()
    }
    $('#webd').hover(startTween, resetTween);

});
  </script>
</head>

<body>
<div class="hot"  id="webd"><div id="photo">hover</div></div>


</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 21.10.2016, 11:41
Аспирант
Отправить личное сообщение для ghost666 Посмотреть профиль Найти все сообщения от ghost666
 
Регистрация: 07.02.2016
Сообщений: 52

спасибо! очень помогли новичку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Погоите разобраться с реагированием на события мышки filmokrut Общие вопросы Javascript 3 06.08.2016 20:07
События при наведении мыши Nataly12 Элементы интерфейса 11 19.09.2014 16:42
События: движение мыши при нажатой клавише bayah Общие вопросы Javascript 11 18.12.2012 10:18
Останавливаем обработку события OlegDegtev jQuery 3 07.08.2012 14:06
Немного Юмора - Гуртовщики Мыши antonM Оффтопик 12 23.03.2012 20:04