需要幫助優化jQuery功能（懸停效果）

Question

我有一個與jQuery的自定義懸停效果。但它並不總是那麼順利。我想經常在多個按鈕和div上使用它。我不是jQuery的親，所以我認爲這個代碼可以更高效，更乾淨。

它做了什麼，它創建了兩個div，它們被CSS（clip-path）轉換成半個正方形（三角形）。這兩個三角形得到您懸停的元素的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 
}