Neo Posted September 21, 2013 Posted September 21, 2013 Hi I'm missing an example about how to combine a jQuery slideUp() and slideDown() effect. I'm well aware that I could use the slideToggle(), but this method is not always suitable. So may I suggest that such an example being added to the section example section of jQuery Effects - Sliding http://www.w3schools.com/jquery/jquery_slide.asp Thank you in advance
harpalsinh999 Posted September 21, 2013 Posted September 21, 2013 (edited) http://www.thatagency.com/design-studio-blog/2009/02/up-and-down-slider-using-jquery/ GO TO URL SEE DEMO AND DOWNLOAD CODE Edited September 21, 2013 by harpalsinh999
Neo Posted September 21, 2013 Author Posted September 21, 2013 http://www.thatagency.com/design-studio-blog/2009/02/up-and-down-slider-using-jquery/ GO TO URL SEE DEMO AND DOWNLOAD CODE Hi Thank you for providing the link. However, this is, as far as I could tell, exactly the method I didn't wish to use as it appear to be just another slideToggle() and not a slideUp() and slideDown() effect. ie. what I would have liked; were an example added to the list of examples where the slideUp() and slideDown() effect were used together. Let me give an example by using the link I have provided as a starting point: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down What I would like to see, is an example of how to make a button or a link at the bottom of the unfolding panel which will close/fold the panel again.
Neo Posted September 21, 2013 Author Posted September 21, 2013 Hi I did some experimentation as I don't really know anything about jquery - yet ! However, I did manage to make something which I guess will do what wish: <!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#open").click(function(){ $("#panel").slideDown("slow"); }); $("#close").click(function(){ $("#panel").slideUp("slow"); });});</script> <style type="text/css">#panel,#open,#close{/*padding:5px;*/text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel{Width: 596px;height: 400px;display:none;} #main_content { Width: 596px;height: 400px; }</style></head><body> <div id="open">Click to slide down panel</div><div id="panel"><div id="main_content">Main conten goes here</div><div id="close">Click to close panel</div> </div> </body></html> All I basically did was to paste the: $("#close").click(function(){ $("#panel").slideUp("slow"); }); and renaming one of the $("#name").click(function(){ from $("#flip").click(function(){ to $("#close").click(function(){ in order to prevent the panel from closing the very minute I open it. I have also take the liberty to renaming the other $("#flip").click(function(){ to $("#open"), so it easier to fully distinguish between them. I hope this example will be helpful for others whom have similar problems with panels. I also hope that the developers of w3schools will make an example like the one I have provided and add it to the example section like I requested in my initial post.
dsonesuk Posted September 22, 2013 Posted September 22, 2013 when it slides Up it finishes with display: none, use that to check if showing or hiding and apply appropriate slide animation. $(document).ready(function(){ $("#flip").click(function(){$("#panel").css('display')=='none' ? $("#panel").slideDown("slow") : $("#panel").slideUp("slow"); });});
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now