javascript - 鼠标悬停时隐藏和动画

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(){
	$(".html5").css("height", height + "px");
	$(".html5").css("width", width + "px");
    $(".html5").addClass("htmlanimate");
    $("#imageid").fadeOut(500);
    
}, function(){
    $("#imageid").fadeIn(500);
	$(".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>