hover to animate css, hover out going back to normal

Question

I have simple animation with jquery and css. When I hover I want texts around span to animate. When I hover out I want texts to be normal to original.

I seem to succeed in the first hover, but I cannot get the hover out part.

$(".mapname").mouseover(function() {
  $(".baseup").animate({
    top: "-0.19em"
  }, function() {
    $(".baseup").anmiate({
      top: "0"
    });
  });
});

.mapname {
  position: fixed;
  font-size: 1.3em;
  top: 10px;
  left: 20px;
}

.baseup {
  position: relative;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mapname" id="click">
  G
  <span class="baseshow baseup">eograp</span> hi
  <span class="baseshow baseup">ca</span> l M
  <span class="baseshow baseup">ap</span>
</div>

Probably because of a typo ??? `$(".baseup").anmiate({` -- anmiate() is not a function... ;) — Louys Patrice Bessette, Apr 10 '19 at 15:03
Yes, @LouysPatriceBessette nailed it. It is the typo in mouseout. Replace anmiate with animate. — Nawed Khan, Apr 10 '19 at 15:06
For future reference you should use the developer console of the browser to watch for errors when JS code doesn't work as you expect it to. Press F12 to open it — Rory McCrossan, Apr 10 '19 at 15:07
And [`.mouseover()`](https://api.jquery.com/mouseover/) does not take two handlers... Use [`.hover()`](https://api.jquery.com/hover/). — Louys Patrice Bessette, Apr 10 '19 at 15:08

score 1 · Answer 1 · edited Apr 11 '19 at 08:27

1

You have misspelled animate as anminate, change it like this, and it will work.

 function() {
    $(".baseup").animate({
    top: "0"
    });
  });
 });

edited Apr 11 '19 at 08:27

Wai Ha Lee

8,598
83
57
92

answered Apr 11 '19 at 08:06

Nandy

92
5

hover to animate css, hover out going back to normal

1 Answers1