How to add multple events to jquery function call onclick event
Hi in my html document I have a call to a jQuery function. The function of the jQuery call is to toggle a header slider bar.
This is the full link with jQuery call:
<img src="http://www.wpinsite.com/wp-content/themes/wpinsite/gfx/down.png" onclick="jQuery('#wpqn_down').slideUp(function(){jQuery('#wpqn').slideDown();});" alt="" />
What I would like to do is also add enother jQuery call as well but I am not sure into with part of the code to put it. This is the code that I want to add to the above click event.
$("body").animate({marginTop: "40px"}, 500 );
So in a nutshell I would like two tings to happen on each click or toggle. On the first click I would like the click event to toggle or hide the header bar and ALSO to contract the "body" margin-top by -40px and on the second click I would like it to display the header bar and also expand the "body" margin-top by 40px;
You can see an example of what I am trying to achieve by visiting my website http://www.wpinsite.co开发者_运维知识库m At the top of the page you will see a yellow header bar. On the page load I have a piece of jQuery that expand the body tag by 40px. When you click the toggle arrow it hides the header bar but it doesn't contact the margin-top by -40px.
I hope this makes sense. Any help would be greatly appreciated.
Add an id or class to your img
tag like this:
<img class="downButton" src="http://www.wpinsite.com/wp-content/themes/wpinsite/gfx/down.png" alt="" />
Then do something like this in jQuery:
jQuery('img.downButton').click(function(){
jQuery('#wpqn_down').slideUp(function(){
jQuery('#wpqn').slideDown();
});
$("body").animate({marginTop: "40px"}, 500 );
});
精彩评论