strange behavior in use of sliding effect

strange behavior in use of sliding effect

Hey guys,
posted yesterday my problem by creating my slider for some div containers. Well this Code works now but i looks strange when i slide to the next div. Let me explain it a litte precisely. On click the Slider should switch to the next div. The current div is set to hide and the next div is be shown. This works but the animation look strange. The current div switch to the right and the next div come from left. But between this action something is wrong because the next div comes from down and left. I try some things with setting a width for the slider but nothing changed. When you use it without a specific width the slider get thicker during the slide effect and then turn to normal size. Here is my code i implemented. Maybe someone has some idea what's the problem. I'm new to jQuery so maybe my implementation way is stupid or wrong for this Projekt :) 

  2. <body>
  3. <div class="clearfix">
  4. <img src="images/leftarrow.png" id="leftarrow" alt="leftarrow"/>
  5. <div class="slider">
  7. <div class="active">
  8. <img src="images/1.jpg" />
  9. </div>
  10. <div>
  11. <img src="images/2.jpg" />
  12. </div>

  14. <div>
  15. <img src="images/3.jpg" />
  16. </div>

  18. <div>
  19. <img src="images/4.jpg" />
  20. </div>

  22. <div>
  23. <img src="images/5.jpg" />
  24. </div>
  25. </div>
  26. <img src="images/rightarrow.png" id="rightarrow" alt="rightarrow"/>
  27. </div><!--Ende Clearfix-->
  28. </body>

  2. <script type="text/javascript" charset="utf-8">
  3. $(document).ready(function(){
  5. $(".slider").children().hide();
  6. $(".active").show();
  10. $("#rightarrow").click(function(event){
  12. var $current = $(".active"); 
  13. var $next = $current.next(); 
  14. var $first = $(".slider :first-child");
  15. //console.log($first);  #debug
  16. //console.log($current); #debug
  17. //console.log($next.length); #debug
  20. if($next.length != 0){
  21. $current.removeClass("active");
  22. $next.addClass("active");
  23. $current.toggle("slide",{direction:"left"},"fast");
  24. $next.toggle("slide",{direction:"right"},"fast");
  25. }
  28. })
  31. $("#leftarrow").click(function(event){
  32. var $current = $(".active"); 
  33. var $prev = $current.prev(); 
  34. var $last = $(".slider :last-child");
  35. //console.log($first);  #debug
  36. //console.log($current); #debug
  37. //console.log($next.length); #debug
  39. if($prev.length != 0){
  40. $current.removeClass("active");
  41. $prev.addClass("active");
  42. $current.toggle("slide",{direction:"right"},"fast");
  43. $prev.toggle("slide",{direction:"left"},"fast");
  44. }
  46. }) 
  47. })
  48. </script>


  2. body{
  3. margin:0 auto;
  4. background:#141414;
  5. color:#fff;
  6. }

  8. #leftarrow{
  9. float:left;
  10. }

  12. #rightarrow{
  13. margin:10px;
  14. }

  16. .slider{
  17. float:left;
  18. }

  20. /*
  21. *IE patch clearfix 
  22. */
  23. .clearfix {
  24. display: inline-block;
  25. }
  26. /*
  27. *vorm IE5/Mac verstecken
  28. */
  29. * html .clearfix {
  30. height: 1px;
  31. }
  32. .clearfix {
  33. display: block;
  34. }
  35. /*
  36. *ende versteckn IE5/Mac 
  37. */
Sorry for my bad english :) 


Greetings