Я пытаюсь создать меню, которое по элементу наведет ширину слайдов элементов, с фоновым изображением вправо, а текст появится слева. Теперь, когда я это делаю, появление текста выглядит не очень хорошо - текст делает какой-то эффект прыжка. Может ли кто-нибудь помочь мне исправить это меню?
Вот html:
<ul id="menu" align="center">
<a title="Passwords Management" href="admin-passwords-management.php"><li id="menu-item" class="menu-first"><p class="" style="display: none;">Passwords management</p></li></a>
<li id="menu-item" class="website-not-active"><img src="../dashboard/images/menu2.png"></li>
<a href="admin-facebook-management.php"><li id="menu-item" class="menu-third"><p class="" style="display: none;">Facebook apps management</p></li></a>
<a href="admin-email-management.php"><li id="menu-item" class="menu-fourth"><p class="" style="display: none;">Email management</p></li></a>
<a href="dashboard-billing.php"><li id="menu-item" class="menu-bill"><p class="" style="display: none;">Billing management</p></li></a>
<a href="dashboard_client_settings.php"><li id="menu-item" class="menu-fifth"><p class="" style="display: none;">Client info</p><!--<img src="../dashboard/images/menu5.png"/>--></li></a>
</ul>
и JS:
$(".menu-first").on({
mouseenter: function() {
$(this).addClass("hover");
$(".menu-first p").addClass("normal");
$(".normal").toggle("fast");
},
mouseleave: function() {
$(this).removeClass("hover");
$(".normal").toggle("fast");
$(".menu-first p").removeClass("normal");
}
});
$(".menu-bill").on({
mouseenter: function() {
$(this).addClass("hover");
$(".menu-bill p").addClass("normal");
$(".normal").toggle("fast");
},
mouseleave: function() {
$(this).removeClass("hover");
$(".normal").toggle("fast");
$(".menu-bill p").removeClass("normal");
}
});
$(".menu-second").on({
mouseenter: function() {
$(this).addClass("hover");
$(".menu-second p").addClass("normal");
$(".normal").toggle("fast");
$(".menu-second p").fadeIn(200);
},
mouseleave: function() {
$(this).removeClass("hover");
$(".normal").toggle("fast");
$(".menu-second p").removeClass("normal");
$(".menu-second p").fadeOut(200);
}
});
$(".menu-third").on({
mouseenter: function() {
$(this).addClass("hover");
$(".menu-third p").addClass("normal");
$(".menu-third p").toggle("fast");
},
mouseleave: function() {
$(this).removeClass("hover");
$(".normal").toggle("fast");
$(".menu-third p").removeClass("normal");
}
});
$(".menu-fourth").on({
mouseenter: function() {
$(this).addClass("hover");
$(".menu-fourth p").addClass("normal");
$(".normal").toggle("fast");
},
mouseleave: function() {
$(this).removeClass("hover");
$(".normal").toggle("fast");
$(".menu-fourth p").removeClass("normal");
}
});
$(".menu-fifth").on({
mouseenter: function() {
$(this).addClass("hover");
$(".menu-fifth p").addClass("normal");
$(".normal").toggle("fast");
},
mouseleave: function() {
$(this).removeClass("hover");
$(".normal").toggle("fast");
$(".menu-fifth p").removeClass("normal");
}
});
Вот jsFiddle
По моему скромному мнению
ul > li > a
а не ul > a> li > p
.hover
на li
. Это не работает на IE8 и ниже.