Make an image slide from left using jQuery

[Dennis Skov Hermannsen]

Ok, I want to make an image slide out from the left side of our website.
This is my CSS

.panel{
	display:none;
	float:left;

}
.pull-me img{
	display:inline-block;
    width:20px;
    height:150px;
	text-decoration:none;
	border-radius:0px 5px 5px 0px;
	padding-top:10px;
}

This is my jQuery

$(document).ready(function(){
	$('.pull-me').click(function() {   
		$('.panel').animate({width:'toggle'},350);
	});
});

And this is the HTML

<div class="panel">
        <a href="http://www.trustpilot.dk/review/game-desk.net" title="Se vores anmeldelser på http://trustpilot.dk"> <script type="text/javascript"> var tpJsHost = (("https:" == document.location.protocol) ? "https://s3.amazonaws.com/trustbox.trustpilot.com/badge/da/4stars/tp_badge-140.png" : "http://trustbox.trustpilot.com/badge/da/4stars/tp_badge-140.png"); document.write(unescape("%3Cimg src="+ tpJsHost + " alt=Trustpilot Badge %3E%3C/img%3E")); </script></a>
        </div>
        <p class="slide"><a hre"#" class="pull-me"><img src="http://game-desk.net/templates/gamedesk2013v2/images/trustpilot.png"></a></p>

It works, but not as I want to. When I click the pull-me class, the panel class comes out, but they are on top of eachother. I want the pull-me class to follow when the panel goes out. How can I do that?

[kevk3v]

$(function(){
$('.panel').css({ position: "absolute", top: "25px", margin-left: "-50%" }).show();
$('.pull-me').click(function() 
{   
$('.panel').animate({left: "toggle"}, "slow");
});
});

[Dennis Skov Hermannsen]

That didn't help, unfortunately. It won't slide at all now.

[kevk3v]

$(function(){
$('.panel').css({ position: "absolute", top: "25px", margin-left: "-50%" }).show();
$('.pull-me').click(function() 
{   
$('.panel').animate({left: "toggle"}, "slow");
});
});

[Dennis Skov Hermannsen]

Well, the image was shown when I edited the code a bit, but it would only place itself inside the pull-me class (the text that says Trustpilot). When I updated using your code, it did the same for a few seconds, and then it rapidly moved to the middle of the page... It's weird
And when clicking the pull-me class again, the image just starts all over. It doesn't go back.

[GumSlone]

have you tried to animate images with css3?
here is a cool example
CSS3 Animation (rocket) - Cascading Style Sheets

i dont realy get what you want to do, but you can put one image on top of another with z-index for css,

anyway here is something what ive done.

http://adtwirl.com/test/pull.html

http://adtwirl.com/test/pull2.html

[kevk3v]

I updated the code

[Dennis Skov Hermannsen]

The second code from GumSlone was just what I needed! But when using it, it starts in the left side, and when I click it, it start 'expanding diagonally from it's left upper corner and down to it's lower right corner. It's hard to explain... The only scripts that are loaded are these:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="includes/jscript/jquery.js"></script>
<script src="templates/{$template}/js/whmcs.js"></script>
<script src="templates/{$template}/js/gamedesk.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

I've tried removing every single one (with the exeption of gamedesk.css), but it's still doing the weird thing....

[GumSlone]

can you upload some screenshots?

try to define a fixed height.