jQueryはアニメーションバックアップしません

Question

私は、フェードインしてクリックすると上に移動するはずのボックスを持っていますが、代わりにそれはそのままです。フェージングは​​動作します...

ありがとうございました！ CSSをサポートしていません

var fadeInDown = function (element, duration, easing) { 
 
    element.css({ 
 
    opacity: '0', 
 
    webkitTransform: 'translateY(100%)', 
 
    transform: 'translateY(100%)', 
 
    }) 
 
    .animate({ 
 
    opacity: '1', 
 
    webkitTransform: 'translateY(0%)', 
 
    transform: 'translateY(0%)', 
 
    }, duration, easing); 
 
}; 
 

 
$('.box').click(function() { 
 
    fadeInDown($('.box'), 400, 'swing'); 
 
});

body { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="box"></div>

Answer 1

jQueryのアニメーションは次のように変換されます。それをアニメートするには、ステップ関数を導入する必要があります。これは、あなたが探しているものに近いものでなければなりません：

また

var fadeInDown = function (element, duration, easing) { 
 
    element.css({ 
 
    opacity: '0', 
 
    webkitTransform: 'translateY(0%)', 
 
    transform: 'translateY(0%)', 
 
    }) 
 
    .animate({ 
 
    opacity: '1' 
 
    }, { 
 
    duration: duration, 
 
    step: function(now, fx) { 
 
     var step = 100*now; 
 
     $(this).css({ 
 
     webkitTransform: 'translateY(' + step + '%)', 
 
     transform: 'translateY(' + step + '%)' 
 
     }); 
 
    } 
 
    }, easing); 
 
}; 
 

 
$('.box').click(function() { 
 
    fadeInDown($('.box'), 400, 'swing'); 
 
});

body { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="box"></div>

、あなたにいくつかの追加の助けを与える可能性がある、this questionを見てみましょう。