JQuery slide problem - want to slide in and out at same time
I'm trying to do an effect where I click on something and slide one image out and another one in at the same time. Here's my code...
-
$("#imgDiv").click(function () {
$("#img1").hide("slide", { direction: "left" }, 2000);
$("#img2").show("slide", { direction: "right" }, 2000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id='imgDiv' style='height: 450px; whitespace:nowrap; border: 1px solid black; width: 700px;'>
<img id='img1' src='test.gif'style='border: 1px solid black; width: 100px;'/>
<img id='img2' src='test.gif'/>
</div>
</body>
My problem is that when img1 starts sliding out, it does a css clear or something because img2 drops below img1 during the animation. Any suggestions?