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上开发。也许其他宝石中的一个不兼容，但是由于默认情况下包含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

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

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

对于其他活动部分，.animate在left或top上运作

对于奇数，.animate在width

上运行

你知道为什么我有这个问题吗？

Answer 1

正如我在评论中指出的那样。 您无需使用使用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而不是{{1}}

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

1 个答案: