How can you make exactly the same hover effect as on this site when you hover over the svg-icon to close the menu?

HTML:

<svg version="1.1" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='50' height='50' x="0px" y="0px" viewBox="0 0 52 51.8" xml:space="preserve"> <path d="M7.7,7.8L26,26.1"/> <path d="M7.5,44.5l17-17"/> <path d="M44.4,44.5L26,26.1"/> <path d="M44.4,7.7L30.2,21.9"/> </svg>

CSS:

 svg { fill: none; } path { fill: none; stroke: #3498db; stroke-width: 10; stroke-dasharray: 0; stroke-dashoffset: 0; transition: 1s; }

There was an idea to do something like this, but not very working:

 var svg = document.querySelector(".elem"); var lines = svg.querySelectorAll("path"); $("svg").hover(function() { for (let i = 0; lines.length > i; i++) { let path = lines[i].getTotalLength(); lines[i].style.strokeDashoffset = path; lines[i].style.strokeDasharray = path; } var int = setInterval(draw, 150); function draw() { for (let i = 0; lines.length > i; i++) { let path = lines[i].getTotalLength(); if (path <= 0) { clearInterval(int); } else { path += 20 * (-1); lines[i].style.strokeDashoffset = 0; } } } });
  • So you just need a hover or completely open / close? - Cheg
  • Only Hover is needed - Dima Vleskov

1 answer 1

You can do this:

 $('.elem').on('mouseenter', function() { var delay = 30; var paths = $(this).find('path'); paths.each(function() { var line = this; var length = this.getTotalLength(); setTimeout(function() { line.style.strokeDasharray = length; line.setAttribute('class', 'animated'); line.style.strokeDasharray = -length; line.style.strokeDashoffset = -length; setTimeout(function() { line.style.strokeDasharray = -length * 2; line.style.strokeDashoffset = -length * 2; }, 350); setTimeout(function() { line.setAttribute('class', ''); line.style.strokeDasharray = length; line.style.strokeDashoffset = '0'; }, 650); }, delay); delay = delay + 30; }); }); 
 svg { width: 26px; height: 26px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } path { stroke: #000; stroke-width: 5px; } svg path.animated { transition: all 0.3s ease; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg version="1.1" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='50' height='50' x="0px" y="0px" viewBox="0 0 52 51.8" xml:space="preserve"> <path d="M7.7,7.8L26,26.1"/> <path d="M7.5,44.5l17-17"/> <path d="M44.4,44.5L26,26.1"/> <path d="M44.4,7.7L30.2,21.9"/> </svg>