1

在此页面上，我找到了我喜欢的效果并尝试将其放在我的网站上，但经过六个小时的谷歌搜索仍然没有 http://terranea.demos.sabrehospitality.com/ 因此，当您单击导航页脚中的“指南”时，向上滑动。

#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';
    }
};
4

3 回答 3

0

请参阅此链接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>
于 2013-11-08T11:03:18.557 回答
0

用 animate() 来做。像这样的东西

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

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

于 2013-11-08T11:00:53.890 回答
0

试试这个检查小提琴

<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

于 2013-11-08T11:21:28.273 回答