複雑なアニメーションがあり、マウスオーバーするとトリガーされ、マウスアウトすると逆のアニメーションが発生します。しかし、問題は、ホバリングを継続的に実行しようとすると、アニメーションが停止することです。
以下は、あなたとアイデアを提供するためだけに、mouseenter と mouseout を使用した私のコードです。
$('body').on("mouseenter", '.template1 article', function(){
$(this).addClass('nowAnimated');
$(this).find('.articleHeadingWrapper').animate({height: "hide"}, 400, function() {
$(this).parent().addClass('mainAnimatedClass');
$(this).fadeIn(400, function() {
$(this).find('.articleHiddenContent p').animate({opacity: "1"}, 400, function(){});
console.log("hover in end")
});
});
});
$('body').on("mouseout", '.template1 article', function(){
$(this).find('.articleHiddenContent p').animate({opacity: "0"}, 400, function(){
$(this).parent().parent().parent().fadeOut(400, function(){
$(this).parent().removeClass('mainAnimatedClass');
$(this).parent().find('.articleHeadingWrapper').animate({height: "show"}, 400, function() {$(this).parent().removeClass('nowAnimated');});
console.log("hover out end")
});
});
});
キャッシュなしでアニメーションを実行するより良い方法はありますか? 事前にご連絡いただきありがとうございます。
更新: 代わりにここにコードを配置しました: http://codepen.io/vincentccw/pen/deEFm