Нужна помощь в оптимизации функции jQuery (эффект зависания)

Question

У меня есть специальный эффект зависания с jQuery. Но это не всегда гладко. Я хочу использовать его часто на нескольких кнопках и div. Я не профессионал с jQuery, поэтому я думаю, что этот код может быть более эффективным и более чистым.

Что он делает, он создает два div, которые преобразуются в квадрат (треугольник) с помощью CSS (клип-путь). эти два треугольника получают outerWidth() и outherHeight() элемента, который вы наводите. Треугольники расположены за пределами нависшего элемента, чтобы они могли скользить внутрь. Когда вы наводите треугольники, они будут выдвигаться и затем будут удалены. Затем будут сброшены значения outerWidth() и outerHeight().

Я положил его на jsfiddle.

https://jsfiddle.net/6uuh0ha7/5/

HTML

<div class="effect position"> 

CSS

.position{ 
      left: 100px; 
      top: 100px; 
      width: 100px; 
      height: 100px; 
      border: solid 1px; 
    } 

    .effect .first { 
      opacity: 0; 
      width: 100%; 
      height: 100%; 
      background-size: cover; 
      -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%); 
      clip-path: polygon(0 0, 0% 100%, 100% 100%); 
    } 


    .effect:hover .first { 
      width: 100%; 
      height: 100%; 
      background-size: cover; 
      -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%); 
      clip-path: polygon(0 0, 0% 100%, 100% 100%); 
    } 

    .effect .second { 
      opacity: 0; 
      width: 100%; 
      height: 100%; 
      background-size: cover; 
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); 
      clip-path: polygon(0 0, 100% 0, 100% 100%); 
    } 

    .effect:hover .second { 
      /*opacity: 1;*/ 
      width: 100%; 
      height: 100%; 
      background-size: cover; 
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); 
      clip-path: polygon(0 0, 100% 0, 100% 100%); 
    } 

    .effect { 
      overflow: hidden; 
      position: relative; 
      text-align: center; 
      cursor: default; 
    } 

    .effect .mask{ 
      position: absolute; 
      overflow: hidden; 
      top: 0; 
      left: 0; 
    } 

Jquery

jQuery(document).ready(function($) { 

    $(".effect").hover(function() { 
      $(".first", this).finish(); 
      $(".second", this).finish(); 

      $colorRed = "#ff0000"; 
      $colorDarkRed = "#930000"; 

      $(this).append('<div class="mask first temp" style="background-color:' + $colorRed + ';"></div>'); 
      $(this).append('<div class="mask second temp" style="background-color:' + $colorDarkRed + ';"></div>'); 


      $width = $(this).outerWidth() + 'px'; 
      $height = $(this).outerHeight() + 'px'; 

      $(".first", this).css({"left" : $width, "top" : $height}); 
      $(".second", this).css({"left" : "-" + $width, "top" : "-" + $height}); 


      $(".first", this).css({"opacity" : "1"}); 
      $(".second", this).css({"opacity" : "1"}); 

      $(".first", this).filter(':not(:animated)').animate({ 
       top: "-0", 
       left: "-0" 
      }, 200, function() { 
       // Animation complete. 
      }); 

      $(".second", this).filter(':not(:animated)').animate({ 
       top: "+0", 
       left: "+0" 
      }, 200, function() { 
       // Animation complete. 
      }); 

     }, 
     function() {    
      $(".first", this).animate({ 
       top: "+" + $height, 
       left: "+" + $width 
      }, 200, function() { 
       $(".first", this).css({"opacity" : "0"}); 
      }); 

      $(".second", this).animate({ 
       top: "-" + $height, 
       left: "-" + $width 
      }, 200, function() { 
       $(".second", this).css({"opacity" : "0"}); 
      }); 

     $('.temp').animate({opacity: 0 }, 
      'fast', // how fast we are animating 
      'linear', // the type of easing 
     function() { // the callback 
      $(this).remove(); 
     }); 

     $width = undefined; 
     $height = undefined; 
    }); 

}); 

Спасибо заранее.

Answer 1

вы должны просто добавить CSS с .effect класса, т.е.

.effect{ 
    min-height:100px 
}