views:

2327

answers:

1

Hello people,

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.

Please help, it was for yesterday as always! :))

Thanks!

+1  A: 

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.

zombat
based on zombat's answer I made an example here just to see for myself what it looks like as I am learning to use jquery myself. http://jsbin.com/orobi
jasondavis
Hi Jason,thank you for the response, but your code as it is is not working on my PC. Can you please tell me what's the issue?