Question

我的代码如下： -

<html>
<head>
<title>Pranav Sharma</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
        body {
            background: #ecf0f1;
            font-family: 'Lato', Arial, sans-serif;
            /*-webkit-font-smoothing: antialiased;
            text-shadow: 50px 50px 50px rgba(0,0,0,0.004);*/

        }
        .panel {
            padding-top: 250px;
            -webkit-text-stroke: 0.5px;
        }
        .name {
            font-weight: 300;
            font-size: 3.2em;
            color: #2d383f;
            padding: 50px;
        }
        .projects, .resume, .blog, .aboutme {
            font-weight: 300;
            font-size: 1.8em;
            color: #2d383f;
            padding: 20px;
        }
        a:link {color:#2d383f;}
        a:visited {color:#2d383f;}
        a:hover {color:#2d383f;}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
            $('.panel').click(function(){$('#pullup').animate({marginTop: '-=15px'});});
</script>
</head>
<body>
<div class="panel" style="text-align: center;" id="pullup">
<span class="name"><a href="">Pranav Sharma</a></span>
<span class="aboutme"><a href="">About Me</a></span>
<span class="blog"><a href="">Blog</a></span>
<span class="projects"><a href="">Projects</a></span>
<span class="resume"><a href="">Resume</a></span>
</div>
</body>
</html>

虽然我已经编写了javascript，并尝试过，但div不会向上移动。我担心这与css有关。有什么问题？我使用了jquery代码的jquery文档。

Answer 1

您需要在document ready电话中包裹您的代码：

$( document ).ready(function() {
    $('.panel').click(function () {
        $('#pullup').animate({
            marginTop: '-=15px'
        });
    });
});

或者将它放在关闭正文标记之前的页面末尾。您正在尝试在尚不存在的元素上执行代码。

<强> jsFiddle example

无法拉起div。为什么不这样做？

1 个答案: