Простите, я не люблю добавлять здесь вопросы для начинающих, но, увы, я застрял. Я пытаюсь переместить несколько вещей влево и за пределы экрана (включая фоновое изображение), эффективно переключая панель управления (#navCol) и увеличивая основную область (.
Работает нормально в Firefox, но не в IE. Я должен отметить, что я новичок с jQuery, но не с html / css, и текущая настройка css выглядит неприлично, но этого не избежать Я подозреваю, что мой jQuery неверен, потому что в IE каждый раз, когда я нажимаю на ссылку переключения, происходит только некоторая анимация. При повторном нажатии другие делают.
Если мне нужно что-то уточнить, пожалуйста, дайте мне знать, и спасибо заранее!
$('a#nav-toggle').click(function() {
$('#navCol').toggle('slide',400);
$('#main').toggleClass('mainLarge', 530);
$('body').toggleClass('backgroundOffset', 500);
return false;
});
Это правильно? Вот HTML:
<body>
<div id="horNav">
<ul id="navigation">
...
</ul>
</div>
<div id="navCol">
Left Col
</div>
<div id="main" class="main">
Main Col
<a href="#" id="nav-toggle"><-></a>
</div> <!-- End main -->
</body>
А вот и CSS:
body {
background: #f1f1f1 url(/images/shadow.png) repeat-y top;
background-position: 400px 0px;
}
.backgroundOffset{
background-position: 55px 0px;
}
#navCol{
background: #eaeaea;
color: #000000;
height:100%;
left:0px;
margin-right:40px;
position:fixed;
top:0;
width:400px;
padding-top: 70px;
}
.main{
padding-left: 460px;
padding-top: 100px;
padding-right: 100px;
}
.mainLarge{
background-position: 55px 75px;
padding-left: 115px;
}