slider po wielu klikach przelatuje za zdjęcia

0

Witam. Dziś postanowiłem pouczyc się jquery i próbuję aktualnie zrobić slider. Fajnie ładnie przeskakuje na kolejne zdjęcia, ale gdy klikam szybko (po kilka razy dblclicki..) na przycisk od przejscia na kolejne zdjecie, to po tych 3 zdjeciach, przeskakuje mi na białe tło - za zdjęcia. Tak tylko dzieje się gdy szybko klikam, normalnie przechodzi na poczatek wtedy. Tutaj jest timer, próbowalem nim zablokowac te klikanie wiele razy ale nie zawsze zablokuje, albo i wcale.

Dodałem tu do sprawdzenia http://jsfiddle.net/N4cbc/

<html>
<head>
  <link rel="stylesheet" href="main.css" type="text/css" />
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
  <script>
  
    $(document).ready(function() {
    
      var lolek = 0;
      
      $('.slider-nav-next').click(function() {
          if(parseInt($('.images').css('margin-left')) < -505)
          {
            $('.images').animate({marginLeft:'0px'},'fast');
          }
          else if(lolek == 0)
          {
            lolek = 1;
            $('.images').animate({marginLeft:'-=504px'},'slow');
            setInterval(function() { lolek = 0; }, 2500);
          }
        });
      $('.slider-nav-prev').click(function() {
          if(parseInt($('.images').css('margin-left')) < 0)
          {
            if((parseInt($('.images').css('margin-left'))+504) < 0)
            {
              $('.images').animate({marginLeft:'+=504px'},'slow');
            }
            else
            {
              $('.images').animate({marginLeft:'0px'},'slow');
            }
          }
      });
    
    });
  
  </script>

  <div class="page">
    <div class="top"></div>
    
    <div class="slider">
      <div class="images">
        <img src="zdj1.jpg" />
        <img src="zdj2.jpg" />
        <img src="zdj3.jpg" />
      </div>
    </div>
    <div class="slider-nav">
      <a href="#" class="slider-nav-prev"><</a>
      <a href="#" class="slider-nav-next">></a>
    </div>
    elo
  </div>
</body>
</html>

CSS:

body {
  margin: 0;
  padding: 0;
}
.top {
  width: 100%;
  height: 60px;
  background: #555;
  margin-bottom: 80px;
}
.slider {
  height: 300px;
  margin: 0px auto;
  width: 500px;
  overflow: hidden;
  border: 1px solid #aaa;
  padding: 2px;
}
.images {
  float: left;
  width: 2000px;
  height: 300px;
}
img {
  width: 500px;
  height: 300px;
  margin-left: 0px;
  position: relative;
}
.slider-nav {
  width: 500px;
  margin: 0px auto;
  text-align: center;
  margin-top: 10px;
}
.slider-nav a {
  width: 30px;
  height: 20px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  background: #ddd;
}
.slider-nav a:hover {
  background: #7CC435;
}
1

animate wykonuje się asynchronicznie. poczytaj o callbackach w animate. albo sprawdzaj sobie czy element jest aktualnie animowany if( $(elem).is(':animated') ) {...}

1 użytkowników online, w tym zalogowanych: 0, gości: 1