當鼠標移過時隱藏和設置動畫

Question

我想讓我的div在鼠標懸停時變爲隱藏狀態，並且轉動動畫和當mouserout div返回時。 所以我做了這樣的事情。

<div class="tec"> 
    <span class="html5"><img ng-src="../images/Technologies/HTML5.png" alt="html5" /></span> 
</div> 

<script> 
$(document).ready(function(){ 
    $(".html5").mouseover(function(){ 
     $(".html5").hide(500); 
     $(".html5").addclass(".htmlanimate"); 
     }); 
    }); 
    $(".html5").mouseout(function(){ 
     $(".html5").addclass(".html5"); 
    }); 
</script> 

到目前爲止，我只能躲在 - 每一件事情別人沒有工作=/

CSS

.htmlanimate { 
    -webkit-animation-name: html5animate; 
    /* Chrome, Safari, Opera/-webkit-animation-duration: 4s;/Chrome, Safari, Opera/-webkit-animation-iteration-count: 3;/Chrome, Safari, Opera */ 
    animation-name: html5animate; 
    animation-duration: 4s; 
    animation-iteration-count: 3; 
} 
@-webkit-keyframes html5animate { 
    0% { 
     border-left:10px solid red; 
    } 
    25% { 
     border-top:10px solid red; 
    } 
    50% { 
     border-right:10px solid red; 
    } 
    100% { 
     border-bottom:10px solid red; 
    } 
} 

Answer 1

我想這可能會幫助你，如果我更瞭解你：

Demo

var img = document.getElementById('imageid'); 
 
var width = img.clientWidth; 
 
var height = img.clientHeight; 
 

 
$(".html5").hover(function(){ 
 
\t $(".html5").css("height", height + "px"); 
 
\t $(".html5").css("width", width + "px"); 
 
    $(".html5").addClass("htmlanimate"); 
 
    $("#imageid").fadeOut(500); 
 
    
 
}, function(){ 
 
    $("#imageid").fadeIn(500); 
 
\t $(".html5").removeClass("htmlanimate"); 
 
});

.html5 
 
{ 
 
    display:inline-block; 
 
    border:10px solid transparent; 
 
} 
 
.htmlanimate { 
 
    -webkit-animation-name: html5animate; 
 
    /* Chrome, Safari, Opera/-webkit-animation-duration: 4s;/Chrome, Safari, Opera/-webkit-animation-iteration-count: 3;/Chrome, Safari, Opera */ 
 

 
    animation: html5animate 5s infinite; 
 
    animation-iteration-count: 3; 
 
} 
 
@-webkit-keyframes html5animate { 
 
    0%, 25% { 
 
     border-left:10px solid red; 
 
    } 
 
    25%,50%,74% {   
 
     border-left:10px solid red; 
 
     border-top:10px solid red; 
 
    } 
 
    75% {   
 
     border-left:10px solid red; 
 
     border-top:10px solid red; 
 
     border-right:10px solid red; 
 
    } 
 
    100% {   
 
     border-left:10px solid red; 
 
     border-top:10px solid red; 
 
     border-right:10px solid red; 
 
     border-bottom:10px solid red; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tec"> 
 
    <span class="html5"> 
 
     <img id="imageid" src="https://www.google.co.in/logos/doodles/2015/googles-17th-birthday-6231962352091136-hp.png" alt="html5" /> 
 
    </span> 
 
</div>