CyberShot Posted December 9, 2009 Share Posted December 9, 2009 I am trying to make some animation. I have a <ul> list that I have lined up and given background images to. There are four images. on the right side of each image is some text. the idea is that when you hover over the image, the list element will slide to the left revealing the text that is hidden. then when you mouseout, the image will slide back into place hiding the text. I can not get this to work. Can you check my code? http://www.iwdstudios.com/test any feedback would be greatly appreciated Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/ Share on other sites More sharing options...
rajivgonsalves Posted December 9, 2009 Share Posted December 9, 2009 this code should help not to sure about the placement <script type="text/javascript"> $(document).ready(function() { $('ul li').hover(function() { $(this).find('span').show(); }, function() { $(this).find('span').hide(); }); }); </script> Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973906 Share on other sites More sharing options...
CyberShot Posted December 9, 2009 Author Share Posted December 9, 2009 well I was finaly able to move a test element. I think the key is having absolute positioning on the right element. then I used this code $("#test").stop().animate({left : "200px"},1000); which is way different from what I have seen online and from what I posted above in my test Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973907 Share on other sites More sharing options...
rajivgonsalves Posted December 9, 2009 Share Posted December 9, 2009 actually because of your absolute positioning it gets hard Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973909 Share on other sites More sharing options...
CyberShot Posted December 9, 2009 Author Share Posted December 9, 2009 I don't know what you mean. What I did was throw in just one image. Then try to move it. I did get it moving, but only after adding absolute positioning. Now I am trying to get it to move back when my mouse leaves the area Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973910 Share on other sites More sharing options...
CyberShot Posted December 9, 2009 Author Share Posted December 9, 2009 well, I was going off the code you posted thinking it's a kind of if statement without the if. but it's not working $(upload).hover(function(){ $(this).stop().animate({left : "-200px"},1000); $("span:eq(0)").show("slow"); }, function() { $(this).stop().animate({left : "200px"},1000); }); I am not getting any errors. Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973911 Share on other sites More sharing options...
rajivgonsalves Posted December 9, 2009 Share Posted December 9, 2009 well I had to modify quite a few things following is the code its a bit glitchy though <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="http://www.iwdstudios.com/test/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://www.iwdstudios.com/test/js/action.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul li').hover(function() { $(this).find('span').animate({width : "250px"},1000); }, function() { $(this).find('span').animate({width : "0px"},1000); }); }); </script> <style type="text/css"> { margin: 0; padding: 0; border: none;} #wrapper { width: 800px; margin: 0 auto; position: relative; } #Container { } ul { height: 48px; } ul li { min-width: 50px; height: 48px; list-style: none; float:left; } ul li#upload { background: url(http://www.iwdstudios.com/test/images/box_upload_48.png) no-repeat center left; height: 48px; } ul li#download { background: url(http://www.iwdstudios.com/test/images/box_download_48.png) no-repeat center left; left: 68px; } ul li#view { background: url(http://www.iwdstudios.com/test/images/camera_add_48.png) no-repeat center left; left: 126px; } ul li#tutorials { background: url(http://www.iwdstudios.com/test/images/computer_48.png) no-repeat center left; left: 186px; } ul li span { display: block; width:0px; overflow:hidden; } ul li span div {margin-left:50px;width:200px;} </style> </head><body> <div id="wrapper"> <div id="Container"> <ul> <li id="upload"><span><div><a href="#">You can upload pictures and things to my site here</a></div></span></li> <li id="download"><span><div><a href="#">You can download things here</a></div></span></li> <li id="view"><span><div><a href="#">View images in my portfolio</a></div></span></li> <li id="tutorials"><span><div><a href="#">See all of my tutorials in one placex</a></div></span></li> </ul> </div><!--END Container--> </div><!--END wrapper--> </body></html> Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973918 Share on other sites More sharing options...
CyberShot Posted December 9, 2009 Author Share Posted December 9, 2009 it's better than what I came up with. thanks. You can see the exact effect I am trying to duplicate here http://davidwalsh.name/ hover over the poplar! link in the nav Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973920 Share on other sites More sharing options...
rajivgonsalves Posted December 9, 2009 Share Posted December 9, 2009 a little copy paste never hurt, modified code not perfect but you can play around with it <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="http://www.iwdstudios.com/test/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://www.iwdstudios.com/test/js/action.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul li').hover(function() { $(this).animate({width : "200px"},1000); }, function() { $(this).animate({width : "0px"},1000); }); }); </script> <style type="text/css"> { margin: 0; padding: 0; border: none;} #wrapper { width: 800px; margin: 0 auto; position: relative; } #Container { } ul { height: 48px; } ul li { min-width: 50px; height: 48px; list-style: none; float:left; } ul li a { display:block; padding:10px 0 0 70px; text-decoration:none; width:120px; } ul li#upload a{ background: url(http://www.iwdstudios.com/test/images/box_upload_48.png) no-repeat center left; policy:continuous; } ul li#download a { background: url(http://www.iwdstudios.com/test/images/box_download_48.png) no-repeat center left; policy:continuous; } ul li#view a{ background: url(http://www.iwdstudios.com/test/images/camera_add_48.png) no-repeat center left; policy:continuous; } ul li#tutorials a{ background: url(http://www.iwdstudios.com/test/images/computer_48.png) no-repeat center left; policy:continuous; } ul li { display: block; width:48px; height:48px; overflow:hidden; } </style> </head><body> <div id="wrapper"> <div id="Container"> <ul> <li id="upload"><a href="#">You can upload pictures and things to my site here</a></li> <li id="download"><a href="#">You can download things here</a></li> <li id="view"><a href="#">View images in my portfolio</a></li> <li id="tutorials"><a href="#">See all of my tutorials in one placex</a></li> </ul> </div><!--END Container--> </div><!--END wrapper--> </body></html> Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973923 Share on other sites More sharing options...
CyberShot Posted December 9, 2009 Author Share Posted December 9, 2009 thanks for the help. I would mark the topic solved, but it keeps giving me an error message when i try. Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973928 Share on other sites More sharing options...
rajivgonsalves Posted December 9, 2009 Share Posted December 9, 2009 well the code which I provided you works in mozilla and since its jQuery it should work in other browsers, just make your changes minimum , Also read the jQuery documentation, most of the jquery syntax is based on css style naming convention Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973932 Share on other sites More sharing options...
CyberShot Posted December 9, 2009 Author Share Posted December 9, 2009 I find the jquery documentation to be the most un helpful documentation out there. it isn't anywhere near complete. I could not find a way to slide things to the left or right on the site. I had to sit here and google the crap out of it to find what I did. Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973933 Share on other sites More sharing options...
CyberShot Posted December 9, 2009 Author Share Posted December 9, 2009 I did figure out one thing that makes the code better. That is that you have to do stop on animate first. If you change the code from this $(this).animate({width : "0px"},1000); to this $(this).stop().animate({width : "0px"},1000); it is much better. The difference is that without the stop() in there, If you wave your mouse over the images, they will keep moving after you leave. With the stop() in there, the stop moving imediatley Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973940 Share on other sites More sharing options...
rajivgonsalves Posted December 9, 2009 Share Posted December 9, 2009 Yes the slide sideways is a bit tricky i've not found a jQuery function do it, however there are plugins for it. maybe you can search on google for them, good work on the stop(), I was not aware of that. Quote Link to comment https://forums.phpfreaks.com/topic/184493-help-with-animation/#findComment-973948 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.