События мыши
Задача: при наведении мыши на объект запускается анимация (на jq)
при убирании мыши анимация возвращается к первоначальному виду. Что лучше использовать для обработки события мыши? простой hover или mouseover/mouseout |
Цитата:
mouseenter/mouseleave или hover |
спасибо!
а как вернуть все обратно при убирании мыши вот код
$('#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});
}
|
ghost666,
написать function resetTween() и добавить
$('#webd').hover(startTween, resetTween);
|
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>
|
спасибо! очень помогли новичку.
|
| Часовой пояс GMT +3, время: 02:28. |