2
jQueryを使用してアニメーションを作成しようとしています。これは、ユーザーがid 'navigation'で識別されるリストアイテムの上を移動するときに、ホバーイベントにバブルが表示されるようにします。私はidで指定されたdivを作成しました。 'navigation_blob'は、上に乗っている各アイテムに表示したいものです。ただし、高さが0jQueryでナビゲーションアニメーションを作成するには
HTML
<div class="key-technical-skillsets">
<h5>Key Technical Skill Sets</h5>
<div id="navigation">
<ol>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL<a/></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Adobe Photoshop</a></li>
<li><a href="#">Wordpress</a></li>
</ol>
</div>
のまま何らかの理由でjQueryの
$(document).ready(function() {
$('<div id="navigation_blob"></div>').css({
width: 0,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(
function() {// Mouse over function
$('#navigation_blob').animate(
{
width: $(this).width() + 10,
left: $(this).position().left
},
{
duration: 'slow',
easing: 'easeOutElastic',
queue: false
}
);
}, function() {// Mouse out function
$('#navigation_blob').animate(
{
width: $(this).width() + 10,
left: $(this).position().left
},
{
duration:'slow',
easing: 'easeOutCirc',
queue: false
});
}
);
});
CSS
#head {
padding-left: 20px;
}
#navigation {
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
position: relative;
z-index: 1;
/* overwrite base */
float: none;
width: 100%;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation li {
display: inline;
margin: 0;
padding: 0;
}
#navigation a {
color: #015287;
display: inline-block;
padding: 5px;
text-decoration: none;
}
#navigation_blob {
top: 0;
background-color: #c0ffee;
position: absolute;
z-index: -1;
border-radius: 15px;
}
p#intro {
clear: both;
margin-top: 10px;
}
を参照してください。タイプミスがここにあります： 'MySQLの'閉じスラッシュは – vaso123
A' '文字の前にあることSHOLDあなたはより良いjsfiddleを提供します.. –
私にはうまく見える... https://jsfiddle.net/my5aad9d/ .. **ちょうどそのjqueryのUIは、イージング効果のために追加しなければならなかった**。 ） – bipen