个人中心
gpt4 book ai didi

JQUERY 滑动门效果 - 适用于 jsFiddle 但不适用于 chrome

转载 作者：行者123 更新时间：2023-11-28 11:44:40 26 4
gpt4 key购买 nike

我正在尝试使用 jquery 制作滑动门效果。我已经在 jsFiddle 中模拟了它，它在那里工作正常。我遇到的问题是，当我在本地运行它时，没有任何效果。我已经在本地下载并链接到 jquery 库，我还有另一个元素，我什至链接到 API，它工作得很好。我不明白这里发生了什么，据我所知一切都在加载，但是当我点击链接时没有任何反应。

这是jsfiddle的链接 http://jsfiddle.net/aosto/kU9HY/

编辑:还发现我的代码似乎不起作用。我正在关注 how to make a sliding door effect? ，由 orbling 提供的方向。但我想我可能把 CSS 搞砸了。不确定最初如何隐藏其他人并使一个人可见。任何帮助将不胜感激。

<!doctype html>
<html>
<head>
<title>DBKustoms</title>
<link rel="stylesheet" href="./css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">    </script>
<script src="./js/include.js"></script>

</head>
<body>

<div id="menu-container">
    <div id="cover"></div>
    <div id="menu-home" class="menu"></div>
    <div id="menu-contact" class="menu">contact</div>
    <div id="menu-services" class="menu"></div>
    <div id="menu-photo" class="menu"></div>
</div>


<div id="buttons">
    <div id="home" class="menu-button">Home</div>
    <div id="contact" class="menu-button">Contact</div>
    <div id="services" class="menu-button">Services</div>
    <div id="photo" class="menu-button">Photo</div>
</div>

</body>
</html>

CSS

#menu-container {
    float:left;
    width: 200px;
    height: 300px;
    clip: auto;
    overflow: hidden;
    position: relative;
    }

#cover    {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -200px;
    background: black;
    z-index:1000;    
    }

#menu-home {
    width:100%;
    height:100%;
    background:blue;
    }

#menu-services {
    Height:100%;
    width:100%;
    background:purple;

    }

#menu-contact {
    Height:100%;
    width:100%;
    background:yellow;
    }

#menu-photo {
    Height:100%;
    width:100%;
    background:brown;

}

#buttons {
    float:left;
}

和 JS

$('.menu-button').click(function() {
    var cMenuButton = $(this);
    var cMenuID = cMenuButton.attr('id');

    var coverHeight = $('#cover').height();
    var cVisibleMenu = $('.menu:visible');
    var cVisibleHeight = cVisibleMenu.height();

    $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() {
        $('.menu').hide();
        $('#menu-' + cMenuID).show();

        var newMenuHeight = $('#menu-' + cMenuID).height();
        var coverHeight = $('#cover').height();

        $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear');
    }); 
});

最佳答案

您需要包装 jquery 内容，以便在 DOM 准备好后加载...

$(function(){
    // your js here
})

JSFiddle 正在为您做这件事。 The problem you encounter locally, is that the javascript runs before the document has loaded, so when the selector is selecting, there is nothing to select.如果您在 DOM 准备就绪后运行，那么它可以正常选择页面上的 HTML 元素。

关于JQUERY 滑动门效果 - 适用于 jsFiddle 但不适用于 chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12980619/

26 4 0
文章推荐： javascript - 如何通过对id进行分组来获取数组的数组
文章推荐： javascript - 如何使用 From 和 To 键短接时序阵列数据
文章推荐： javascript - $ function 在普通(无库)JS 中意味着什么？
文章推荐： javascript - Javascript 中数字加数字为 NaN
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com