关于 if 语句和位置移动的 jQuery 问题

标签 jquery html css syntax jquery-animate

我正在尝试编写一个程序,基本上用户点击图像后图像将向右移动 25 像素。当我点击它时图像移动,但我试图添加一段代码使图像通过窗口右侧时返回到窗口左侧。我试过在动画过程中使用 If 语句,但它似乎不起作用。这是我拥有的:

$('#image').click(function() {
$(this).animate({
   left: '+=155',
function() {
    if ($(this).left > $(document).width)  {
 $(this).left = 0
  }
   };

    });

});


是我使用了错误的语法还是我的函数有误?感谢您的帮助。

最佳答案

我会这样做...

$('#image').click(function() {

     $(this).animate({
            left: '+=155',
            function() {
                if ($(this).offset().left > $(document).width)  {
                   $(this).css({ left: 0 });
                }


       });
});

虽然实际上最好先将移位像素添加到原始 left 中,并确保不超过宽度。在这种情况下,返回 false 并且根本不移动该元素。

您可能还想在计算偏移量之前将 #image 的宽度添加到偏移量中,否则直到元素的最左侧超出时才会触发它已超出。

关于关于 if 语句和位置移动的 jQuery 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4282587/

相关文章:

jquery - 如何使用 jQuery 在 iframe 中结束视频时触发事件?

javascript - Bootstrap 3 工具提示删除图像填充

javascript - Firefox 启动连接时无法将 WebRTC DataChannels 与 Chrome 一起使用

HTML:如何使水平导航栏具有下拉菜单?

javascript - jQuery + Bootstrap 日期选择器 : How to have two datepicker inputs update each other?

javascript - 获取元素后面的文本

HTML - 使表单值消失,并控制文本输入的高度和宽度

css - 创建带有叠加文本的图 block 布局 - 负边距是错误的方法吗?

css - 位置 : absolute causes overflow on the page

Jquery:从字符串中删除所有特定的 HTML 标签