移动面板并调整其大小以模拟生长效果

发布于 2024-08-03 13:11:59 字数 941 浏览 5 评论 0原文

我很难理解并使用 jQuery 创建正确的函数。

我的网站有 2 个主要区域。第一个是显示在我命名为面板的其他区域上方的内容区域。

我想要的只是当我单击特定链接以向上移动一点并调整大小以适应移动大小时的此面板。它应该代表一个从下往上生长的面板，但目前无法正常工作！？

这是我的 jQuery 代码：

<script>
$("#moveUp").click(
 function(){
     $("#panel").animate(
   { 
          marginTop: "-=50px",
    }, 1000 ); 
   }
  );
 };

 function() {
  $("#panel").animate(
   { 
          height: "+=50px",
    }, 1000 ); 
   }
  );
 } 
);
</script>

这是 html：

<body>

<div id="content-container">

<div id="content">
some content
</div>

</div>

<div id="panel">

<div class="content">
other content
<br /><br />
<a href="#" id="moveUp">move a bit up</a>
</div>

</div>

</body>

我的目标是当我单击“向上移动一点”链接时，面板向上移动 50px。稍后我想在此处显示我的电子邮件地址，并且将具有一个功能，该功能将显示我的电子邮件的 div 元素，或者如果我按其他链接 - 它将隐藏我的电子邮件地址 - 面板将向下移动。

原文

I have hard time understanding and creating a proper function using jQuery.

I have 2 main areas in my site. The first is the content area that appears over the other area I named panel.

All I want is this panel when I click on a specific link to move a bit upper and to resize to the size of the movement. It should represent a panel growing from the bottom up which is currently not working!?

Here is my jQuery code:

<script>
$("#moveUp").click(
 function(){
     $("#panel").animate(
   { 
          marginTop: "-=50px",
    }, 1000 ); 
   }
  );
 };

 function() {
  $("#panel").animate(
   { 
          height: "+=50px",
    }, 1000 ); 
   }
  );
 } 
);
</script>

Here is the html:

<body>

<div id="content-container">

<div id="content">
some content
</div>

</div>

<div id="panel">

<div class="content">
other content
<br /><br />
<a href="#" id="moveUp">move a bit up</a>
</div>

</div>

</body>

What's my goal is when I click on the 'move a bit up' link, the panel to move 50px upwards. Later I want to show my email address here and will have a function that will show a div element with my email or if I press on other link - it will hide my email address - the panel will move downward.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

手心的温暖 2024-08-10 13:11:59

您的脚本中有很多语法错误。有些大括号不匹配，并且您确实不需要声明第二个函数来对高度进行动画处理，您可以在单个 animate() 调用中实现多个属性操作。这是一个有效的版本：

<script type="text/javascript">
$("#moveUp").click(function(){
     $("#panel").animate({
          marginTop: "-=50px",          
          height: "+=50px"
    }, 1000);
});
</script>

我很确定这就是您想要实现的目标，但请仔细检查它。

Your script has a lot of syntax errors in it. Some of the braces don't match, and you really don't need to declare a second function for animating the height, you can achieve multiple property manipulations in a single animate() call. Here is a version that works:

<script type="text/javascript">
$("#moveUp").click(function(){
     $("#panel").animate({
          marginTop: "-=50px",          
          height: "+=50px"
    }, 1000);
});
</script>

I'm pretty sure that's what you're trying to achieve, but double-check it.

回复收藏 0 原文

~没有更多了~