Question

在这个页面上，我发现我喜欢的效果，并尝试将其放在我的网站上但是六小时后仍然没有谷歌搜索 http://terranea.demos.sabrehospitality.com/ 所以，当你登上＆＃34;指南＆＃34;在导航页脚中向上滑动。

#IndexGuide{
    position:relative;
    width:100%;
    z-index:98;
    background:#fff;
}

是我的div CSS，使用此函数我得到的结果却没有像该页面那样的动画

function GuideSlide(){
    $('#IndexGuide').css({
            'position': 'absolute',
            'top': '80px',
            'z-index': '100'
        });
};

我查看了他们的页面来源，他们做了类似的事情

$('#guide-toggle').click(function () {
    $(this).toggleClass('active');
    $('#guide-close').toggleClass('visible');
    $('#work-cont').slideToggle();
    $('#myModal2 .close').click();
    if ($(this).hasClass('active')) {
        currentOffset = $(document).scrollTop();
        scrollPageTo(0);
    } else {
        scrollPageTo(currentOffset);
    }
    if($('#masthead,#myCarousel').length>0) {
        $('#masthead,#myCarousel').slideToggle();   
    }
    return false;
});

我尝试修改但没有结果。

这是适合我的所有浏览器的脚本！

$(document).ready(function() {
    var windowHeight = $(window).height();
    var lineHeight = $('#IndexGuide').height();
    var newPosition = windowHeight + (lineHeight - 35);
    $("#IndexGuide").css({top:newPosition}, 1000, function(){});
});
var flag = 'up';
function GuideSlide(){
    if(flag == 'up'){
    $("#IndexGuide").animate({"top": "80px"}, 1000);
        flag = 'down';
    } 
    else {
    var windowHeight = $(window).height();
    var lineHeight = $('#IndexGuide').height();
    var newPosition = windowHeight + (lineHeight - 35);
    $("#IndexGuide").animate({top:newPosition}, 1000, function(){});
        flag = 'up';
    }
};

Answer 1

使用animate（）执行此操作。像这样的东西

$("#IndexGuide")css({"position":"absolute", "z-index":"100"}).animate({"top": "80px"}, 1000, function() {
     // after animation stuff
});

您也可以在不将位置编辑为绝对位置并设置负边距顶部的情况下执行此操作。

Answer 2

请参阅此链接http://api.jquery.com/toggle/

我希望以下简单示例能够为您提供预期的解决方案。以下示例来自链接http://api.jquery.com/toggle/。我复制了代码，因此您无需在网站上搜索。

    <html lang="en">
<head>  
<meta charset="utf-8">  
<title>toggle demo</title>  
<style>  
p {    background: #dad;    font-weight: bold;    font-size: 16px;  }  
</style>  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body> 
<button>Toggle 'em</button><p>Hiya</p><p>Such interesting text, eh?</p> <script>
$( "button" ).click(function() 
{  
$( "p" ).toggle( "slow" );
});
</script> 
</body>
</html>

Answer 3

尝试此检查fiddle

<div class="link"><a class="open-modal" href="#myModal">Guide</a></div>
<div style="position:relative;">
<div class="header">header</div>
<div id="IndexGuide" class="footer">Footer</div>
</div>

JS

var flag = "up";
$(".open-modal").click(function(){
    if(flag == "up"){
    $("#IndexGuide").css({
        "position":"absolute", "z-index":"100"}).animate({"top": "0%"}, 2000, function() {

    });
        flag = 'down';
    } else {
        $("#IndexGuide").css({
        "position":"absolute", "z-index":"100"}).animate({"top": "100%"}, 2000, function() {

    });

        flag = 'up';
    }
})

参考https://stackoverflow.com/a/15626812/1699833

如何在Click上垂直移动div

3 个答案: