如何在单击时垂直移动div

debugcn 发表于 Dev

阿库尔·冯·伊特拉姆

在这个页面上，我觉得效果，我喜欢并尝试把它放在我的网站，但6小时谷歌搜索仍然一无所获后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';
    }
};

哈里斯·辛格（Harish Singh）

试试这个检查小提琴

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。