jQuery .animate，延迟和持续时间之间的混淆

Question

我正在尝试制作个人网站，但我遇到了 jQuery 的情况。 .animate 函数的行为很奇怪。

我有这个 CofeeScript 代码，它应该为体验部分右侧的橙色链接设置动画 here

$(".resume_show, .experiences_index, .experiences_show").ready ->
# The above scoping is possible with the awesome pluging  jquery-readyselector

  $("div.link_txt").rotate -90
  $("section.preview").hover (->
    $(this).children("a").stop(true).animate width: "40px", 0, "swing"
    $(this).children("a").children("img").stop(true).fadeIn 500
    $(this).children("a").children("div.link_txt").stop(true).fadeIn 500
    return
  ), ->
    $(this).children("a").stop(true).animate width: "5px", 0, "swing"
    $(this).children("a").children("img").stop(true).fadeOut 100
    $(this).children("a").children("div.link_txt").stop(true).fadeOut 100
    return
  return

如您所见，我不得不将 duration 修复为 0，因为 jQuery 对此进行了延迟。

我试图在 JSFiddle 上复制/粘贴我的代码，问你为什么我会遇到这种奇怪的行为，但它运行良好：http://jsfiddle.net/8s3Fn/

所以我认为这是我的开发环境的问题：

我在 Ruby On Rails 上进行开发。也许其他 gem 之一不兼容，但是由于默认包含 jQuery，我对此表示怀疑。

这是我的 Gemfile：

source 'https://rubygems.org'
ruby '2.1.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.2'

# Use sqlite3 as the database for Active Record
group :development do
  gem 'sqlite3'
end

# Rail administration
gem 'devise'
gem 'activeadmin', github: 'gregbell/active_admin'

# Use SCSS for stylesheets
gem 'sprockets'
gem 'sass-rails', '~> 4.0.0'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-turbolinks'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'

# Markdown support
gem 'redcarpet'

# Sucurity token issue
gem "figaro"

# Bread Crum
gem "crummy", "~> 1.8.0"

group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

group :production do
  gem 'pg', '0.15.1'
  gem 'rails_12factor', '0.0.2'
end

# Use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.1.2'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

总之，当我打开 Firefox 控制台并悬停这些部分时，我会收到以下消息：

reflow: 0.18ms
reflow: 0.16ms
reflow: 0.31ms
reflow: 0.16ms
reflow: 0.32ms
reflow: 0.18ms
reflow: 0.18ms
reflow: 0.2ms

我还有其他使用 jQuery 的 .animate 动画的移动部件，一切正常：

• 持续时间确实就是持续时间
• 控制台上没有消息

对于其他运动部件，.animate 在left 或top 上运行

对于奇数，.animate 在width 上运行

你知道我为什么会遇到这个问题吗？

Answer 1

正如我在评论中指出的那样。 你不需要使用 use swing 选项，因为它是默认的 docs。

你也不需要用.children("selector1").childern("selector2")嵌套你的选择器，这只会让你的代码看起来又大又丑，你可以简单地做.children("selector1 selector2")。

在您网站的开发者控制台中使用此代码，它可以工作，此代码在 javascript 中，尽管浏览器不理解 coffeescript

$(".resume_show, .experiences_index, .experiences_show").ready(function() {
  $("div.link_txt").rotate(-90);
  $("section.preview").hover((function() {
    $(this).children("a").stop(true).animate({width: "40px"}, 1000);
    $(this).children("a img").stop(true).fadeIn(500);
    $(this).children("a div.link_txt").stop(true).fadeIn(500);
  }), function() {
    $(this).children("a").stop(true).animate({width: "5px"}, 1000);
    $(this).children("a").children("img").stop(true).fadeOut(100);
    $(this).children("a div.link_txt").stop(true).fadeOut(100);
  });
});

此外，由于您使用的是 turbolinks，我建议您不要使用 ready，您应该使用 on event