Question

我有一个面板，它将在我的网站标题后面分层，标题位于标题下面...理想情况下，当用户点击标签时，面板从标题后面向下滑动，当用户再次单击选项卡，在标题后面向后滑动。我自己从未尝试过使用javascript，所以这是我拼凑在一起的东西......

有人能指出我做错了什么吗？我只是希望面板向下滑动，然后备份......并且代码尽可能简洁。我的测试网站目前位于http://test.vtisvc.com

CSS（注意，我暂时增加了此元素的z-index，以显示它在标题上的位置。

#panel-hhs
{
  position: relative;
  height: 166px;
  width: 206px;
  top: 0;
  left: 0;
  margin-top: -137px;
  margin-left: 998px;
  background: url('images/hhs_panel.png');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 130;
}

HTML（包含我的整个标题，javascript位于底部）

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQuery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQueryUI.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

</head>
<body>
<div id="banner-wrap">
  <div id="banner-bar">
    <div id="banner-hood">
      <center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_hood.png" style="float:center"></center>
        <div id="banner-logo"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_logo4.png" style="float:center"></center></div>
        <div id="banner-text"><center><a href="#"><font face="georgia" color="#8a0304&quot;">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.google.com"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">CONTACT</font></a></center></div>
        <div id="banner-svc"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_svc.png"></center></div>
    </div>
  </div>
<script type="text/javascript">

jQuery(document).ready(function() {
    jquery("#panel-hhs").toggle(function() {
        jquery(this).animate({top: "-=100px"});
    }, function() {
        jquery(this).animate({top: "+=100px"});
    });
});

</script>
<div id="panel-hhs"><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/hhs_pic2.png"></div>
</div>

Answer 1

类似于http://jsfiddle.net/gKfKW/76/？

你错过了：

position: relative;
top: -150px;

处于默认状态。

无法让jQuery动画切换工作

1 个答案: