使用按钮导航以打开页面（jquery）答案

【问题标题】：Navigation with Button to open Page (jquery)使用按钮导航以打开页面（jquery）
【发布时间】：2016-01-17 23:57:29
【问题描述】：

我想做一个导航（主页、媒体、联系人...），我想要这样如果您按主页，它会在向下滑动中打开主页（页面），因此它不会在导航中使用任何 href。

再次简单地解释一下：我有一个带有按钮（图像）的导航，我想单击一个按钮以向下滑动打开另一个图像。

是的，我对这一切都是新手，我想学习，但是用谷歌搜索并没有找到任何对我有帮助的东西。

这就是我尝试过的，但没有奏效（什么都没有发生）：

CSS：

.Home { 
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    background-image: url("../images/Home.png");
    position: absolute;
    width: 175px;
    height: 60px;
    top: 179px;
    left: 155px;
    z-index:3
    }
.Home:hover {
    background-image: url("../images/Homeh.png");
    position: absolute;
    width: 175px;
    height: 60px;
    top: 178px;
    left: 155px;
    z-index:2
    }
.panel {
    background-image: url("../images/Panel.png");
    position: absolute;
    width: 1699px;
    height: 843px;
    top: 200px;
    left: 120px;
    z-index:1
    }

HTML：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $(".Home").click(function(){
        $(".panel").slideToggle("slow");
    });
});
</script>

</head>

<body>
<a><span class="Home"></span></a>
<a><span class="panel"></span></a>
  <script src="assets/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

标签： jquery html css image navigation

【解决方案1】：

您应该使用 jQuery 的内置函数animate()，它会即时更改元素的 CSS。您可以控制它们更改的速度以及您希望动画发生的顺序。

要让面板从顶部向下滑动，您必须首先创建面板，使其顶部位置等于面板高度的负值。然后使用 animate() 向下/向上移动它。

所以在你的代码中，改变：

.panel {
    top: 200px;
}

到这里：

.panel {
    top: -843px; /* Height of panel */
}

然后使用 Javascript：

$(document).ready(function() {

    (function dropDown() {
        $('.home').one('click', function(){
            $('.panel').animate({
                top: "+=900"
            }, 400, function() {
                $('.home').one('click', function(){
                    $('.panel').animate({
                        top: '-=900'
                    }, 400, function() {
                        dropDown();
                    });
                });
            });
        });
    })();
  
});

jsFiddle 带图片背景

更新

您还可以使用 jQuery 的 offset() 函数使 div 从文档的特定部分下拉。它采用提供的选择器并计算它与文档边缘的距离（以像素为单位）。在这种情况下，您可以将下拉 div 的顶部位置设置为等于主页按钮的偏移量（同时仍然减去它自己的高度）。

例子：

// Height of drop-down element
var height = $('.panel').height();

// Position drop-down element right above target button
var yPosition = $('.home').offset().top - height;
$('.panel').css('top', yPosition+'px');

(function dropDown() {

    $('.home').one('click', function(){
        $('.panel').css({
            'display': 'block',
            'opacity': 0
        });      
    
        $('.panel').animate({
            opacity: 1,
            top: "+=250"
        }, 400, function() {
            $('.home').one('click', function(){
            $('.panel').animate({
                opacity: 0,
                top: '-=250'
                }, 400, function() {
                    dropDown();
                });
            });
        }); 
    });
        
})();

完整演示 - jsFiddle

jquery javascript css html

【讨论】：

所以我也可以将它用于基于图片的按钮/框？
另一种方法是如何让它从与按钮相同的高度滑出，因为我的导航距离顶部 200 像素，如果从屏幕顶部出来就不好看了。
我再次更新了我的答案并提供了一个完整的例子
感谢您对我的帮助，但它没有出现淡入我希望它不会淡入我希望它在导航下向下滑动。
没问题。再看看小提琴，让我知道这是否是你要找的。span>