im trying to import TweenMax into my html, but i cant find what im doing wrong... I´ve done everything they say in their website.
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/PaginaFinal.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
Here im make the init;
<body onload="init()" onclick="pointerDefault(event)">
<input type="text" id="search" name="procurarPalavra" onkeypress="premirEnter(event)">
<img src="search.png" alt="Smiley face" id="ok" onclick="enviarPalavra(event)" >
<img src="info.png" id="help">
<footer id="myFooter">
</footer>
The script goes here
function init() {
var search = document.getElementById("ok");
var text = document.getElementById("search");
var help = document.getElementById("help");
search.hover(function () {
TweenMax.to(this, .35, {width: "80", height: "80"})
}, function () {
TweenMax.to(this, .5, {width: "50", height: "50"})
})
text.hover(function () {
TweenMax.to(this, .35, {width: "80", height: "80"})
}, function () {
TweenMax.to(this, .5, {width: "50", height: "50"})
})
help.hover(function () {
TweenMax.to(this, .35, {width: "100", height: "100"})
}, function () {
TweenMax.to(this, .5, {width: "70", height: "70"})
})
}
</script>
</body>
</html>
Seems to me that you are expecting .hover()
of jQuery to work here but I do not see any jQuery imported. I could be wrong.
After loading jQuery, you could either wrap your search
and other variables into a jQuery object eg $(search)
or you could use jQuery to get them in the first place eg var search = $('#ok');
instead of var search = document.getElementById('ok');
.
Or, if you are looking to avoid jQuery, you could listen to mouseover
and mouseout
events using addEventListener
method.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.