This is happening because you have changed the html inside the class firstName on mouse enter. My advice is just change the html after mouseout event i.e
$('.firstName').on('mouseout', function () {
$(this).html('Eden Hazani');
});
I’m trying to animate a string if a use hovers over it.
(turning it into an array and pulling different animations on every letter)
The animations work perfectly but I have one problem.
once I hover over the element (mouseenter) for a second time the code shows the user all of the tags within the hovered upon element like so:
Code Below.
if you hover over the name twice you will see the problem.
any suggestions on how to fix this?
JSfiddle:
$(function() {
var $win = $(window),
w = 0,
h = 0,
rgb = [],
getWidth = function() {
w = $win.width();
h = $win.height();
};
$win.resize(getWidth).mousemove(function(e) {
rgb = [
Math.round(e.pageX / w * 255),
Math.round(e.pageY / h * 255),
150
];
$(document.body).css('background', 'rgb(' + rgb.join(',') + ')');
}).resize();
$('.firstName').on('mouseenter', function () {
let firstNameArray = $('.firstName').html().split(' ')[0].split('');
let lastNameArray = $('.firstName').html().split(' ')[1].split('');
$('.firstName').html('');
for (letter of firstNameArray) {
let radomizer = Math.floor(Math.random() * 3);
$('.firstName').append(`<span class='animation${radomizer}'>${letter}</span>`);
}
$('.firstName').append(' ')
for (letter of lastNameArray) {
let radomizer = Math.floor(Math.random() * 3);
$('.firstName').append(`<span class='animation${radomizer}'>${letter}</span>`);
}
});
});.firstBox {
margin-top: 10rem;
}
.firstBox>div {
margin-top: 3rem;
}
div>h1 {
color: white;
font-size: 55px;
text-shadow: 2px black solid;
}
.animation0 {
animation: letterrotate 1.5s forwards;
display: inline-block;
}
.animation1 {
animation: lettermovedown 1.5s forwards;
display: inline-block;
}
.animation2 {
animation: lettermoveup 1.5s forwards;
display: inline-block;
}
@keyframes letterrotate {
0% {
transform: rotate(100deg);
}
50% {
transform: rotate(250deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes lettermovedown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
@keyframes lettermoveup {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Eden Hazani</title>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
<div class="firstBox">
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-delay="100">
<h1 class="firstName">Eden Hazani</h1>
</div>
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-delay="450">
<h1>Not Your Avarage</h1>
</div>
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-delay="750">
<h1>Web Developer</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="secondBox">
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script>
AOS.init();
</script>
</body>
</html>That solves the problem, but what happens is the animation cuts out immediately once I mouseout… I tried to put it inside a timeout like so: $(‘.firstName’).on(‘mouseout’, function () { setTimeout(() => { $(this).html(‘Eden Hazani’); }, 1500); }); but then I get the first problem within the timespan of the timeout
you have to apply some timeouts and wrap the name in some div