html 元素无法使用 jQuery 正确移动

Posted 2023-05-08

【中文标题】html 元素无法使用 jQuery 正确移动

【英文标题】：html element doesn't move correctly with jQuery

【发布时间】：2012-11-28 21:00:53

【问题描述】：

我必须修复 http://rhemapress.pl/www_wopr/ 上的底部滑块。如果您在单击右箭头两次时看到，则动画将重新开始并再次动画。在这里，当我在右箭头上单击一个时，这应该被阻止并且无法第二次单击。

向右移动的次数由 checkWidth() 动态创建；

    function checkWidth() 

        var elements = $('.items').children().length;

        var width = Math.ceil(elements / 5) * 820;

        return width;
    

这个 return realWidth 女巫有点像偏移限制。变量偏移在开始时设置为 0。因此，如果我单击右键，则在方法 moveRight() 中检查元素是否可以移动并且它正在移动。最后偏移量增加了 820px（滑块的一页），所以如果我们有 2 页，则不能调用下一步。但它是，这是问题！ ：/

我的代码

<script type="text/javascript">
$(document).ready(function() 
    $('a.prev').bind('click',moveLeft);
    $('a.next').bind('click',moveRight);


    var realWidth = checkWidth(); 
    realWidth -= 820;

    var offset = 0;


    function moveLeft(e) 

        var position = $('.items').position();
        var elements = $('.items').children().length;

        if ((elements > 5) && ((offset - 820) >= 0) ) 
            $('.items').animate(
            'left': (position.left + 820)
            , 300, function() 
                offset -= 820;
            );

        
    

    function moveRight(e) 

        var position = $('.items').position();
        var elements = $('.items').children().length;

        if ((elements > 5) && ((offset + 820) <= realWidth))         

            $('.items').animate(
            'left': (position.left - 820)
            , 300, function() 
                offset += 820;
            );
        
    

    function checkWidth() 

        var elements = $('.items').children().length;

        var width = Math.ceil(elements / 5) * 820;

        return width;
    
);
</script>

我怎样才能正确地做到这一点？

【参考方案1】：

您似乎想在当前动画完成之前阻止点击事件触发。如果元素当前正在动画，您可以通过阻止函数的其余部分执行来做到这一点：

function moveLeft(e) 
   if ($(this).is(":animated")) 
      return false;
   

【讨论】：

谢谢你，但错误仍然存​​在。我想防止在offset == realWidth 时再次调用动画。当offset == realWidth 我可以再次调用moveRight() - 我必须阻止它。当偏移量具有最大值 (= realWidth) 时，任何点击右箭头都不能移动对象 - 只有左箭头可以移动。

@TomaszSzulc 您可以将该条件添加到您的函数中：function moveRight(e) if (offset == realWidth) return false; ...

看看这个 - pastebin.com/QhsPiUUA 它不会停止。检查rhemapress.pl/www_wopr：/

@TomaszSzulc 当您希望它不再动画时，offset 和 realWidth 的实际值是多少？

现在我在滑块上有 2 页。所以realWidth 等于(pages*820 - 820)。所以如果offset == 820 && realWidth == 820，那么右箭头必须被挡住。当offset = 0，我点击右箭头，然后offset == 820 和滑块在第二页，offset = realWidth == 820 和右箭头必须被阻止。有一点很奇怪。当我单击右箭头时，动画不流畅，但当我单击左箭头时，动画很流畅。