JQuery анимировать горизонтальный слайд по странице - PullRequest
Новая
       20

JQuery анимировать горизонтальный слайд по странице

1 голос
/ 19 февраля 2011

Привет всем, еще один интересный,

Я строю меню, которое будет скользить по всей ширине страницы (ширина: 100%;) и мне нужна помощь.У меня есть кнопка со стрелкой, плавающая в правой части страницы, которая будет вызывать выдвижение строки меню при нажатии.Мне бы хотелось, чтобы кнопка со стрелкой выдвинулась перед ней и однажды полностью изменила изображение стрелки на противоположный файл.

Большая проблема заключается в том, что их ширина и высота должны быть гибкими.чтобы разрешить различный контент.У меня есть слабая попытка заставить это работать, но я знаю, что мне здесь не хватает многих факторов.Мой код даже не касается перемещения кнопки со стрелкой вместе с остальными ... и это не из-за отсутствия усилий!

Любая помощь?Спасибо!

HTML: 

<div id="main">
     <div class="trans" id="trigger">
          <img class="arrow_small" src="images/left_small.png" alt="slide out menu" />
     </div>
     <div id="slider">
          <div class="trans" id="overlay"></div>
          <div id="content">
               <p>this is the content</p>
          </div>
     </div>
</div>

CSS: 

#main {
    width:100%;
    height:306px;
    top:50%;
    margin-top:-153px;
    position:absolute;
}
#trigger {
    width:30px;
    height:100%;
    float:right;
    background-color:#000;
    position:relative;
    z-index:3;
}
.arrow_small {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-6px;
    margin-top:-12px;
}
#overlay {
    width:100%;
    height:100%;
    position:absolute;
}
#content {
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;

Javascript: 

$(document).ready(function(){
//hide functions
    $('#slider').css('display', 'none');
//menu slide out
    $('#trigger').click(function (){
        var bar = $('#slider');
            bar.show(function(){
                this.animate({'marginRight':'100%'},1000);
            });
    });
});

1 Ответ

1 голос
/ 19 февраля 2011

Это то, что вы ищете? Попробуйте это в вашем браузере:

HTML: 

<div id="main">
 <div id="slider">
 &nbsp;
      <div id="image">
        <p>Image would go here</p>
      </div>
      <div id="content">
        <p>content...</p>
      </div>
 </div>

CSS: 

    * {
    margin: 0;
    padding: 0;
}
#slider {
    width: 6%;
    height: 350px;
    top: 33%;
    background-color: black;
    position: absolute;
    right: 0;
}
.arrow_small {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-6px;
    margin-top:-12px;
}
#image {
    width: 75px;
    background-color: black;
    position:relative;
    color: white;
    float: left;
}
#content {
    position: relative;
    overflow: hidden;
    left: 100px;
    color: white;
}

ЯШ: 

    $(function() {
    $('#image').toggle(function (){
        $("#slider").animate({"width":"100%"}, 1000);
    }, function() {
        $("#slider").animate({"width":"6%"}, 1000);
    });
});

Я удалил изображение, которое у тебя было, только потому, что у меня его не было, и я хотел проверить его локально с текстом. Надеюсь, это поможет!

...