One image is displayed by default. On mouseover of that image, the other image needs to slide out from the left. I have it working on a blank page, but whenever I place it with other HTML, the second image will slide out, but will slide back in immediately. If I mouseover the first image a few times, the second image will eventually stay popped-out, but only after hovering mouse cursor over the first image a few times.

Here's my code:

2. <script type="text/javascript">
3.  $(function() {
4.      $('.slidebttn').hover(
5. function () {
6. var $this = $(this);
7. var $slidelem = $this.prev();
8. $slidelem.stop().animate({'width':'320px'},300);
9. $slidelem.find('span').stop(true,true).fadeIn();
10. $this.addClass('button_c');
11. },
12. function () {
13. var $this = $(this);
14. var $slidelem = $this.prev();
15. $slidelem.stop().animate({'width':'160px'},200);
16. $slidelem.find('span').stop(true,true).fadeOut();
17. $this.removeClass('button_c');
18. }
19. );
20.  });
21. </script>
22. <div class="button_wrap">
23. <a class="button_aLeft" id="button_aLeft"><span><img border="0" src="images/image2.jpg" /></span></a>
24. <a class="button_bLeft slidebttn" id="button_bLeft"><span><img border="0" src="images/image1.jpg" /></span></a>
25. </div>

And here's my CSS:

2. .button_wrap{
3.     position:relative;
4.     height:650px;
5.     overflow:hidden;
6.     font-weight:bold;
7.     font-size:11px;
8. }
9. .button_aLeft{
10.     color:#fff;
11.     text-align:left;
12. }
13. .button_aLeft span{
14.     display:none;
15. }
16. .button_bLeft{
17.     background-color:#fff;
18.     position:absolute;
19.     top:0px;
20.     right:0px;
21. }

Can anyone help me out here?