Форум

ghost666 · #1 (**permalink**) 10.10.2016, 11:43

Задача: при наведении мыши на объект запускается анимация (на jq)
при убирании мыши анимация возвращается к первоначальному виду.
Что лучше использовать для обработки события мыши? простой hover или mouseover/mouseout

рони · #2 (**permalink**) 10.10.2016, 12:24

Сообщение от ghost666

простой hover или ~~mouseover/mouseout~~

в порядке приоритета лучше css :hover!!!
mouseenter/mouseleave или hover

ghost666 · #3 (**permalink**) 10.10.2016, 16:53

спасибо!
а как вернуть все обратно при убирании мыши
вот код

$('#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});

}

рони · #4 (**permalink**) 10.10.2016, 17:24

ghost666,
написать function resetTween() и добавить

$('#webd').hover(startTween, resetTween);

рони · #5 (**permalink**) 11.10.2016, 02:43

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>

ghost666 · #6 (**permalink**) 21.10.2016, 11:41

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

Форум

Справочник

Discord чат

Курсы javascript