activate the button in a callback function after the animate
var isClickable = true;
right.click(function()
{
if(ul.css('left') != (maxMove * -1) + 'px' &&
isClickable)
{
isClickable = false;
ul.animate({left:'-=50px'},function(){
isClickable = true;
});
}
});
On Tue, Nov 11, 2008 at 11:06 AM, David .Wu <[EMAIL PROTECTED]> wrote:
>
> Hi everybody
> This my testing gallery slider, it will count image's amount, and
> prevent it not to outside the wrapper, but I got one problem, if user
> click button after the animation finished, it's done well, but if user
> click too fast, the js will not catch the left property in time
> correctly, how to fix the bug?
>
> CSS
> <style type="text/css">
> <!--
> body { font-size: 12px; }
> #wrapper
> {
> height: 50px;
> width: 50px;
> overflow: hidden;
> position: relative;
> border:1px #FF0000 solid;
> }
> ul
> {
> margin: 0px;
> padding: 0px;
> list-style-type: none;
> position: absolute;
> white-space:nowrap;
> }
> li
> {
> display:inline;
> margin:0 -3px 0 0;
> width:50px;
> height:50px;
> overflow:hidden;
> }
> -->
> </style>
>
> HTML
> <div id="wrapper">
> <ul>
> <li><img src="1.jpg" border="0" /></li>
> <li><img src="2.jpg" border="0" /></li>
> <li><img src="3.jpg" border="0" /></li>
> </ul>
> </div>
> <input type="button" name="left" id="left" value="left" />
> <input type="button" name="right" id="right" value="right" />
>
> JavaScript
> <script language="javascript">
> <!--
> $(document).ready(function()
> {
> var wrapper = $('#wrapper');
> var ul = $('ul',wrapper);
> var itemsWidth = $('li',ul).outerWidth();
> var itemsLen = $('li',ul).size();
> var maxMove = (itemsLen - 1) * itemsWidth;
> var minMove = 0;
> var right = $('#right');
> var left = $('#left');
> right.click(function()
> {
> if(ul.css('left') != (maxMove * -1) + 'px')
> {
> ul.animate({left:'-=50px'});
> }
> });
> left.click(function()
> {
> if(ul.css('left') != minMove + 'px')
> {
> ul.animate({left:'+=50px'});
> }
> });
> });
> //-->
> </script>
>
