animate.cssフレームワークと、JQueryを使用するホバーハンドラを使用して、特定のアニメーションを適用したいと思います。この効果は1回だけ適用されますが、onmouseoverとonmouseoutが実行されるたびに繰り返されることを望みます。私が使用したコード：JQueryでの連続ホバー
$(document).ready(function() {
$(".meal-photo-Sport").hover(function()
{
$('.meal-photo-Sport a').addClass('animated fadeInUp');
}, function(){
$('.meal-photo-Sport a').addClass('animated fadeOutDown');
})
})
あなたはクラス名を削除できます。このため
$(document).ready(function() {
$(".meal-photo-Sport").hover(function(){
$('.meal-photo-Sport a')
.addClass('animated fadeInUp')
.removeClass('fadeOutDown');
}, function(){
$('.meal-photo-Sport a')
.addClass('animated fadeOutDown')
.removeClass('fadeInUp');
})
})
sooooありがとうございました。それはトリックでした:) –
$(document).ready(function() {
$(".meal-photo-Sport").on({
mouseenter: function() {
$(".meal-photo-Sport a").removeClass("animated fadeOutDown").addClass('animated fadeInUp');
},
mouseleave: function() {
$(".meal-photo-Sport a").removeClass("animated fadeInUp").addClass('animated fadeOutDown');
}
});
});
$(document).ready(function() {
$(".meal-photo-Sport").hover(function()
{
$('.meal-photo-Sport a').addClass('animated fadeInUp');
$('.meal-photo-Sport a').removeClass('fadeOutDown');
}, function(){
$('.meal-photo-Sport a').addClass('animated fadeOutDown');
$('.meal-photo-Sport a').removeClass('fadeInUp');
})
})
を使用すると、アニメーションCSSで提供さjQueryの拡張機能を使用することができます。ここでは、あなたがそれを行うだろう方法は次のとおりです。
$.fn.extend({
animateCss: function(animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
$(".meal-photo-Sport").hover(function() {
$('.meal-photo-Sport a').animateCss('fadeInUp');
}, function() {
$('.meal-photo-Sport a').animateCss('fadeOutDown');
}).meal-photo-Sport {
padding: 2em;
display: inline-block;
background-color: tomato;
color: #ffffff;
font-size: 4em;
}
.meal-photo-Sport a {
opacity: 0;
}
.meal-photo-Sport:hover a {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div class="meal-photo-Sport">
<a> Demo Meal</a>
</div>
あなたがそうでホバーfadeOutDownとマウスアウトではfadeInUpを削除...また、他のクラスを削除する必要が....しかし、あなたができれば、それは良いでしょうCSSやHTMLのような関連するコードをすべてここに含めてください。 – DaniP