草庐IT

javascript - jQuery.easing - easeOutCubic - 强调轻松

coder 2024-07-17 原文

我正在使用 Robert (http://gsgd.co.uk/sandbox/jquery/easing/) 的 jQuery 缓动插件，我需要强调或拖出缓动效果。

基本上，我希望 ease 效果非常快，但在 ease out 期间会大大减慢。

我相信我可以使用 jQuery.easing.easeOutCubic(null, current_time, start_value, end_value, total_time) 来做到这一点，但我不知道如何正确使用它。

如何实现？

最佳答案

您不需要缓动插件来使用 jQuery 进行自定义缓动。您只需要要使用的一个缓动函数的 JavaScript 源代码。

这里是从 jQuery UI 源代码中获取的 easeOutCubic 函数。参见 this thread for more .

$.easing.easeOutCubic = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

现在您可以编辑函数和/或重命名它...

$.easing.myEasing = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

(以下所有示例都使用 375 像素的蓝色方 block ，slideToggle() 的持续时间为 3 秒。您可以更改 3 秒(3000 毫秒)的持续时间来演示效果根据您的喜好。我选择了 3 秒以使其足够慢以查看差异。)

然后你就把它放在你的 jQuery 里，也许是这样的......

$(document).ready(function(){

        $.easing.myEasing = function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t + 1) + b;
        }

        $("#button").click(function() {
            $('#myDiv').slideToggle(
                3000, // <-- Animation Duration (3000 ms)
                'myEasing'  // <-- the Name of your easing function
            );
        });

});

下面是上述代码的演示，其中包含重命名为 myEasing 的 easeOutCubic 函数，并应用于 slideToggle() 立方体持续 3 秒。

http://jsfiddle.net/kJZxQ/

好的，现在回到你的问题:你说你想要“......缓动效果非常快，但在缓动过程中会大大减慢。”

这是 easeOutCubic 的图形:

您有两个选择，您可以操纵缓动方程本身，或者我们可以查看是否有其他缓动函数具有类似的曲线，但在缓出部分之前更陡峭(更快)。

这个演示页面直观地向您展示了所有缓动曲线...

http://api.jqueryui.com/easings/

如您所见，几条曲线的形状类似于 (7)-easeOutCubic，但前端更陡。这里有几个例子......

(10)-easeOutQuart easeOutQuart Demo

(13)-easeOutQuint easeOutQuint Demo

(16)-easeOutExpo easeOutExpo Demo

似乎是最后一个，easeOutExpo 是可用的最陡峭的股票函数。通过比较上面包含的方程式的差异，我们还可以操纵 easeOutExpo 方程式使曲线更陡峭。

这个自定义方程式快得离谱，然后速度大大减慢...

http://jsfiddle.net/kJZxQ/11/

比上一个更极端......

http://jsfiddle.net/kJZxQ/12/

上一个演示的持续时间增加到 6 秒以夸大效果......

http://jsfiddle.net/kJZxQ/13/

通过比较上述演示的数学方程式，您可以看到正在操纵哪个变量来增强效果并相应地进行自己的微调。

我真的认为 easeOutExpo 更像您所描述的。本质上，它是您的 easeOutCubic 方程式，但只是前面更快，最后更慢。

关于javascript - jQuery.easing - easeOutCubic - 强调轻松，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7748617/

easeOutCubicjavascriptcodenoreferrernoopenerjqueryeasing

有关javascript - jQuery.easing - easeOutCubic - 强调轻松的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  3. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

  7. jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息 - 2

    我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. jquery - 在 Rails 中从原型(prototype)切换到 jquery，助手呢？ - 2

    我目前从prototype切换到jquery主要是为了支持简单的ajax文件上传。我使用:https://github.com/indirect/jquery-rails95%的javascript代码是由railshelper编写的，例如:-remote_function-render:updatedo|page|-page.replace_html'id',:partial=>'content'-page['form']['name']=something-page.visual_effect:highlight,'head_success'...我知道我必须为Jquery重写5%

随机推荐