将上滑页脚转换为滑入答案

【问题标题】：Convert slide up footer to slide in将上滑页脚转换为滑入
【发布时间】：2014-01-03 23:26:49
【问题描述】：

50.00 英镑，如果有人能帮我解决这个问题

我发现了这个简单的上滑页脚 http://return-true.com/examples/slidefooter2.html

想知道是否有人可以将其转换为从屏幕左侧滑入而不是从屏幕底部滑入现在的代码是这样的

javascript

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(function($) {
        var open = false;
        $('#footerSlideButton').click(function () {
            if(open === false) {
                $('#footerSlideContent').animate({ height: '300px' });
                $(this).css('backgroundPosition', 'bottom left');
                open = true;
            } else {
                $('#footerSlideContent').animate({ height: '0px' });
                $(this).css('backgroundPosition', 'top left');
                open = false;
            }
        });     
    });
</script>

CSS

body {
    margin:0;
    padding:0;
    background: #EFEFEF;
}
#footerSlideContainer {
    position: fixed;
    bottom:0;
    width: 100%;
}
#footerSlideButton {
    background: url(sliderButton.png) top left no-repeat transparent;
    position: absolute;
    top: -55px;
    right: 20px;
    width:50px;
    height:50px;
    border: none;
    cursor: pointer;
}
#footerSlideContent {
    width: 100%;
    height: 0px;
    background: #251b15;
    color: #CCCCCC;
    font-size: 0.8em;
    border: none;
    font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideContent h3 {
    font-size: 36px;
    color: #9AC941;
    margin: 10px 0 10px 0;
}
#footerSlideContent ul {
    color: #EE8D40;
    list-style-type: none;
    line-height: 2em;
}
#footerSlideText {
    padding: 15px 10px 25px 25px;
}
#lookHere {
    font-family: DejaVuSansBook, Sans-Serif;
}
#lookHere h1, #lookHere h2 {
    font-size: 20em;
    padding: 0;
    margin: 0;
    color: #AAAAAA;
}
#lookHere h2 {
    font-size: 1.5em;
    margin: 0 0 0 30px;
}
#lookHere span.orange {
    color: #EE8D40;
}
#lookHere span.green {
    color: #9AC941;
}
</style>

HTML

<div id="lookHere">
<h1>Huh?!</h1>
<h2>This page isn't blank. Save some space. <span class="orange">Look</span> to the <span class="green">bottom right</span>.</h2>
</div>
<div id="footerSlideContainer">
    <div id="footerSlideButton"></div>
    <div id="footerSlideContent">
        <div id="footerSlideText">
            <h3>Hey! I'm a Sliding Footer</h3>
            <p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
            <p>What can you use me for? Well look at all this stuff:</p>
            <ul>
                <li>Sales information</li>
                <li>Important updates</li>
                <li>Unobtrusive about panel</li>
                <li>Or just a good ol' footer</li>
            </ul>
            <p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
        </div>
    </div>

【问题讨论】：

标签： jquery jquery-animate panel footer slideup

【解决方案1】：

用这个替换你的代码......当用户将鼠标悬停在屏幕右下角的小 5% 上并在离开页脚时缓慢返回 1 秒后再次缓慢返回时，这将起作用......

$(document).ready(function(){ $('#footerSlideContainer').css({position:'fixed',left:'95%',bottom:'0',height:'100px'}); $('#footerSlideContainer').mouseover(function(){ $('#footerSlideContainer').animate({left: '0%'}); }); $('#footerSlideContainer').mouseleave(function(){ $('#footerSlideContainer').animate({left: '95%'},1000); }); });

【讨论】：