jqueryアニメーションでscss mixinを使用する方法はありますか？

Question

jqueryとsassを始めたばかりなので、ちょっと混乱します。このようなjqueryのコードで

@mixin borderradius { 
 
    border-top-left-radius  : 100; 
 
    border-top-right-radius : 100; 
 
    border-bottom-right-radius : 100; 
 
    border-bottom-left-radius : 100; 
 
}

：これで代わりの方法で

$(document).ready(function() { 
 
    $('#divic,#divonja').mouseenter(function() { 
 
     $(this).animate({ 
 
      borderTopLeftRadius: 100, 
 
      borderTopRightRadius: 100, 
 
      borderBottomLeftRadius: 100, 
 
      borderBottomRightRadius: 100 
 
     }, 200); 
 
    }); 
 
    $('#divic,#divonja').mouseleave(function() { 
 
     $(this).animate({ 
 
      borderTopLeftRadius: 0, 
 
      borderTopRightRadius: 0, 
 
      borderBottomLeftRadius: 0, 
 
      borderBottomRightRadius: 0 
 
     }, 200); 
 
    }); 
 
    $('#divic,#divonja').click(function() { 
 
     $(this).toggle(1000); 
 
    }); 
 
});

私の質問は、私はこのようなミックスインを使用することができていますこれらのボーダー半径をすべて4回書くと、私は何かを書くことができますe @ borderradiusなどがありますか？このような 何か：

$(document).ready(function() { 
 
    $('#divic,#divonja').mouseenter(function() { 
 
     $(this).animate({ 
 
      @include borderradius 
 
     }, 200); 
 
    }); 
 
    $('#divic,#divonja').mouseleave(function() { 
 
     $(this).animate({ 
 
      @include borderradius 
 
     }, 200); 
 
    }); 
 
    $('#divic,#divonja').click(function() { 
 
     $(this).toggle(1000); 
 
    }); 
 
});

Answer 1

朗報！ちょうどあなたが望むobjectを返すfunctionを使用してください。

function borderRadius(radius) { 
 
    return { 
 
    borderTopLeftRadius: radius, 
 
    borderTopRightRadius: radius, 
 
    borderBottomLeftRadius: radius, 
 
    borderBottomRightRadius: radius 
 
    }; 
 
} 
 

 
$(document).ready(function() { 
 
    $('#divic,#divonja').mouseenter(function() { 
 
     $(this).animate(borderRadius(100), 200); 
 
    }); 
 
    $('#divic,#divonja').mouseleave(function() { 
 
     $(this).animate(borderRadius(0), 200); 
 
    }); 
 
    $('#divic,#divonja').click(function() { 
 
     $(this).toggle(1000); 
 
    }); 
 
});

#divonja { background: #e1f0aa; width: 200px; height: 200px; border-radius: 20px; }

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

MMMMM、今それはすぐそこにいくつかのJSの良さです。 =）