Я создал слайд jquery для события hover. Внизу страницы у меня есть элемент слайдера, который будет раскрываться, когда мышь наводит курсор на элемент. У меня есть вкладка, которая будет торчать верхнюю часть элемента, чтобы напомнить пользователю, что функциональность существует. Эта вкладка вызывает у меня много проблем, и когда вы наводите курсор на вкладку, элемент будет многократно расширяться и сжиматься. Я попытался отредактировать CSS, и он работал правильно, когда я удалил margin-top, но дизайн был не таким, как задумывалось. Я попытался добавить DIV, чтобы решить эту проблему, но это не сработало. Можете ли вы помочь мне правильно настроить вкладку?
Я использую JQuery 1.5.1
Вот HTML:
<body>
<div class="Livwidget">
<div class="tab"></div>
</div>
</body>
Вот CSS:
.Livwidget{
background: #000;
bottom: 0;
left: 0;
margin-left: 5%;
margin-right: 5%;
padding-top: 3px;
position: fixed;
width: 90%;
}
.tab{
background: #000;
height: 30px;
margin-left: 0;
margin-top: -30px;
width: 135px;
}
Вот JS:
<script>
$(document).ready(function(){
$(".Livwidget").hover(makeTall,makeShort);
}); // close document.ready
function makeTall(){ $(this).animate({"height":250},350);}
function makeShort(){ $(this).animate({"height":5},350);}
</script>
Любая помощь будет принята с благодарностью. Я часами играл, пытаясь это исправить, и, похоже, не могу понять это.