jqueryでli要素のボーダー半径をアニメーション化するにはどうすればよいですか？

Question

jqueryとphpを始めたばかりで、私はいくつかのPHP Webサイトを構築する方法についてUdemyのチュートリアルに従いました。今度は、li要素をアニメーション化して、mouseenter（）でボーダー半径を変更します。ここで

は私のコードです：私はそれがアニメーション化されませんli要素（メニュー、接触...）のいずれかの上にマウスを入力すると

$(document).ready(function() { 
 
    $('.list_el').mouseenter(function() { 
 
    $(this).animate(borderRadius(300), 200); 
 
    }); 
 

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

#nav { 
 
    margin: -27px 0 0; 
 
    margin-top: 50px; 
 
} 
 
#nav ul { 
 
    display: inline-block; 
 
    text-align: left; 
 
    list-style: none; 
 
} 
 
#nav ul li { 
 
    display: inline-block; 
 
    width: 90px; 
 
    height: 44px; 
 
    margin: 0 10px; 
 
    text-align: center; 
 
} 
 
#nav ul li a { 
 
    display: block; 
 
    padding: 10px 15px; 
 
    color: white; 
 
    border: solid 2px white; 
 
    background: #353535; 
 
    outline: solid 2px #353535; 
 
    text-decoration: none; 
 
} 
 
#nav ul li a:hover { 
 
    background: #8ca757; 
 
    outline: solid 2px #8ca757; 
 
}

<div id="nav"> 
 
    <ul id="my_navbar"> 
 
    <li class="list_el"><a href="index.php">Home</a> 
 
    </li> 
 
    <li class="list_el"><a href="team.php">Team</a> 
 
    </li> 
 
    <li class="list_el"><a href="menu.php">Menu</a> 
 
    </li> 
 
    <li class="list_el"><a href="contact.php">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

はしかし、私はとき意味私はF12を押して、境界線の半径が変化していることを私に示すliをターゲットにしますが、ウェブサイト上で境界線を曲げません。だから私は何が間違っているの？

念のために：

Answer 1

アニメーション作品、それだけで何の視覚効果を持っていません：あなたのAの要素がすべてのスタイルが含まれていますが、Aの境界半径またはあなたが入れた場合をアニメーション化すれば、あなたはいくつかの変更が表示されますオーバーフロー：list_elのために隠された、このインスタンスのために動作します

$('.list_el').mouseenter(function() { 
    $(this).find("a").animate(borderRadius(300), 200); 
}); 

http://codepen.io/anon/pen/PGPrgY

Answer 2

あなたは、マウスを使用する必要があります

入力し、任意の近代的なブラウザで一緒に

$('.list_el').on("mouseenter", function() { 
     $(this).find("a").animate(borderRadius(300), 200); 
}).on("mouseleave", function() { 
     $(this).find("a").animate(borderRadius(0), 200); 
}); 

Answer 3

をイベントを残して、あなたはまた、単にと、この移行を達成することができます：200msの.list_elの期間にわたって含まa要素のborder-radiusをアニメーション

.list_el:hover a { 
    border-radius: 300px; 
    transition: 0.2s; 
} 

aが含まれています。

これは、ボーダー半径を元に戻すmouseleaveハンドラーを追加することを前提としていることに注意してください。マウスを要素から離したときに更新された半径をそのまま残す予定がある場合は、適用されません。 1sではなく0.2sを使用して

例ので、それはより明白です：

#nav { 
 
    margin: -27px 0 0; 
 
    margin-top: 50px; 
 
} 
 
#nav ul { 
 
    display: inline-block; 
 
    text-align: left; 
 
    list-style: none; 
 
} 
 
#nav ul li { 
 
    display: inline-block; 
 
    width: 90px; 
 
    height: 44px; 
 
    margin: 0 10px; 
 
    text-align: center; 
 
} 
 
#nav ul li a { 
 
    display: block; 
 
    padding: 10px 15px; 
 
    color: white; 
 
    border: solid 2px white; 
 
    background: #353535; 
 
    outline: solid 2px #353535; 
 
    text-decoration: none; 
 
} 
 
#nav ul li a:hover { 
 
    background: #8ca757; 
 
    outline: solid 2px #8ca757; 
 
} 
 
.list_el:hover a { 
 
    border-radius: 300px; 
 
    transition: 1s; 
 
}

<div id="nav"> 
 
    <ul id="my_navbar"> 
 
    <li class="list_el"><a href="index.php">Home</a> 
 
    </li> 
 
    <li class="list_el"><a href="team.php">Team</a> 
 
    </li> 
 
    <li class="list_el"><a href="menu.php">Menu</a> 
 
    </li> 
 
    <li class="list_el"><a href="contact.php">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>