Fantastic, thanks a lot!!!!
On Tue, Nov 11, 2008 at 7:32 PM, Alexandre Plennevaux
<[EMAIL PROTECTED]>wrote:
>
> 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>
> >
>
