使用按钮导航以打开页面 (jquery)

Question

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

Answer 1

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

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

所以在您的代码中，更改：

.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 从文档的特定部分下拉。它采用提供的选择器并计算它与文档边缘的距离（以像素为单位）。在这种情况下，您可以将 drop-down 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

使用按钮导航以打开页面 (jquery)

Navigation with Button to open Page (jquery)

html

css

navigation

jquery

image