javascript - Fade in content on mouse over and hide on mouse out -

i want #first visibility:hidden , when mouse on fades in , on mouse out fades out.

edit fiddle : https://jsfiddle.net/vsdlk90s/1/

$("#one").on({     mouseover: function () {         timer = settimeout(function () {             $("#first").css('opacity', '1');         }, 400);     },     mouseout: function () {         cleartimeout(timer);         $("#first").css('opacity', '0', 'visibility', 'hidden');      } }); 

when multiple properties defined, supposed set them using map.

.css({    'opacity': '0',    'visibility': 'hidden' }); 

a better approach have class visibility:hidden set #first, , toggle class based on conditions.. in these lines.

 $("#one").on({      mouseover: function () {          timer = settimeout(function () {              $("#first").removeclass('hidden').css('opacity', '1');          }, 400);      },      mouseout: function () {          cleartimeout(timer);          $("#first").css({              'opacity': '0'          }).addclass('hidden');       }  }); 

check fiddle