jQuery animate-任何通用的解决方案

jQuery animate - any universal solution?

本文关键字：解决方案 任何通 animate- jQuery      更新时间：2023-09-26

所以我基本上使用jQuery动画得到了2个错误，我想修复Firefox、Chrome、Safari、Opera和InternetExplorer中的这些错误。

错误：

  1. 动画不起作用
  2. 动画完成功能触发两次

我试过这个：

$("html").animate({...}, {duration: 500, complete: function () {...}});

此处链接

Firefox：Animation works；Animation complete trigger once

Chrome浏览器：动画不起作用；Animation complete trigger once

Safari:动画不起作用；Animation complete trigger once

歌剧：动画不起作用；Animation complete trigger once

Internet Explorer:Animation works；Animation complete trigger once

$("body").animate({...}, {duration: 500, complete: function () {...}});

此处链接

Firefox：动画不起作用；Animation complete trigger once

铬：Animation works；Animation complete trigger once

Safari:Animation works；Animation complete trigger once

歌剧：Animation works；Animation complete trigger once

InternetExplorer:动画不起作用；Animation complete trigger once

$("html, body").animate({...}, {duration: 500, complete: function () {...}});

此处链接

Firefox：Animation works；动画完成触发两次

铬：Animation works；动画完成触发两次

Safari:Animation works；动画完成触发两次

歌剧：Animation works；动画完成触发两次

Internet Explorer:Animation works；动画完成触发两次

我的测试环境：Windows 7

Firefox版本41.0.1

铬版本46.0.2490.80 m

Safari 5.1.7版

Opera版本32.0

Internet explorer版本11

这个问题有什么解决办法吗？要删除所有浏览器上的这2个错误吗

您可以将ScrollTop属性与Animate事件一起使用。

首先，您需要为每个DIV或部分添加唯一的ID。接下来，你需要给每个锚点一个合适的DIV ID，你想让这个锚点滚动到这个ID

通过使用$（'anchor-id'）.position（）.top，这将有助于找到该DIV相对于浏览器窗口顶部的位置。因此，每次调用animate时，scrolltop属性都会准确地知道到达特定分区所需的滚动距离。

而且它是动态的，如果浏览器窗口的高度较低，则距离值将始终是完美的。

工作JSFIDDLE

HTML:

<div class="step1">Step 1 <a href="#step2">Step 2</a><br></div>
<div id="step2" class="step2">Step 2<a href="#step3">Step 3</a></div>
<div id="step3" class="step3">Step 3<a href="#step4">Step 4</a></div>
<div id="step4" class="step4">Step 4</div>

Javascript：

$(function(){
    $('a').click(function(){
        var destination = $(this).attr('href');
        $('html,body').animate({scrollTop:$(destination).position().top}, 'slow');
    });
});

这是我的代码，但不起作用：

$("html,body").animate({
    scrollTop: "500px"
}, {
    duration: 500,
    complete: function () {
        alert('Test');            
    }
});

以下是适用于所有浏览器的代码：

$("html,body").animate({
    scrollTop: "500px"
}, {
    duration: 500
})
.promise()
.then(function () {
    alert('Test');            
});

这个答案是作为对我问题的评论发布的，我认为这对其他人也有帮助

如果你想在测试实际浏览器行为的基础上，以安全的方式解决跨浏览器问题，同时处理一系列与滚动相关的可用性问题，你可能想看看jQuery.scrollable（我的一个组件）。

你的测试代码看起来是这样的：

$( window ).scrollTo( "500px", { 
    duration: 500, 
    complete: function () { alert( "Test" ); };
} );
相关文章：