jquery関数でCSSプロパティを適用する

Question

私のコードにいくつかのエラーがあります。誰かが私を助けてくれるかもしれない。私はこのエラーを取得しています：

SyntaxError: missing formal parameter: $(this).css("position" , "relative");

$(document).keydown(function(e) { 
 
    var count = 0; 
 

 
    if (e.keyCode == 40) { 
 
    count++; 
 
    } 
 

 
    if (count == 1) { 
 
    $('#box').animate({ 
 
     borderSpacing: -90 
 
    }, { 
 
     step: function(now, fx) { 
 
     $(this).css('-webkit-transform', 'rotate(' + now + ' deg)'); 
 
     $(this).css('-moz-transform', 'rotate(' + now + ' deg)'); 
 
     $(this).css('transform', 'rotate(' + now + ' deg)'); 
 
     }, 
 
     duration: 'slow' 
 
    }, 'linear'); 
 
    } else { 
 
    $('#box').animate({ 
 
     height: '10%' 
 
    }, { 
 
     $(this).css("position", "relative"); 
 
     $(this).css("margin-top", "100px"); 
 
     $(this).css("width", "30%"); 
 
     $(this).css("background-color", "tomato"); 
 
     $(this).css("margin-left", "20%"); 
 
     $(this).css("align-content", "center"); 
 
    }); 
 
    } 
 
});

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

Answer 1

あなたがAPIに間違った方法を使用している、animateの第2引数のための機能を使用して、それが動作します。

代わりにこれを試してみてください：

$('#box').animate({ 
    height: '10%' 
}, function() { 
    $(this).css("position", "relative"); 
    $(this).css("margin-top", "100px"); 
    $(this).css("width", "30%"); 
    $(this).css("background-color", "tomato"); 
    $(this).css("margin-left", "20%"); 
    $(this).css("align-content", "center"); 
}); 

Answer 2

jQuery.fn.animateの最後の引数は、関数であるべき。あなたがそれを必要とするならば。

$(selector).animate({...styles...}, time, easing, function(){ /* callback */}) 

また、オブジェクトを使用して、すべてのCSSプロパティを同時に設定することができます。

$(this).css({ 
 
    position: 'relative', 
 
    marginTop: '100px', 
 
    width: '30%', 
 
    backgroundColor: 'tomato', 
 
    marginLeft: '20%', 
 
    alignContent: 'center' 
 
})