jQuery使整个页面上的水平幻灯片动画化 [英] jQuery animate horizontal slide across page

问题描述

嘿，另一个有趣的人，

我正在构建一个菜单，该菜单将在页面的整个宽度(宽度:100％；)上滑动，并且需要一些帮助.我在页面的右侧有一个箭头按钮，单击该按钮会触发菜单栏滑出.我希望箭头按钮在其前面滑出，并一路将箭头图像更改为它的对面文件.

I'm building a menu that will slide across the entire width of the page (width:100%;) and need some help. I have an arrow button floating on the right side of the page that will trigger a menu bar to slide out when clicked. I'd like the arrow button to slide out in front of it and once all the way across change the arrow image to it's opposite file.

最大的问题是，这些控件的宽度和高度必须灵活，以允许变化的内容.我在使它起作用方面作了微弱的尝试，但是我知道我在这里遗漏了很多因素.我的代码甚至没有触摸将箭头按钮与其余按钮一起移动..这也不是为了省力！

The big issue is that the width and height of these need to be flexible to allow for varying content. I've got a feeble attempt at making it work, but I know that I'm missing a whole lot of factors here. My code doesn't even touch moving the arrow button along with the rest.. and that's not for lack of effort!

有帮助吗?谢谢！

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:

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);
            });
    });
});

推荐答案

这是您要找的东西吗?在浏览器中尝试一下:

Is this what you're looking for? Try this out in your browser:

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;
}

js:

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

我删除了您仅有的图像，因为我没有图像，并想在本地用文本对其进行测试.希望这会有所帮助！

I removed the image you had in your only because I didn't have it and wanted to test it locally with text. Hope this helps!

这篇关于jQuery使整个页面上的水平幻灯片动画化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！