How to get jquery animate to work in Rails 3.2.8?

心不动则不痛 提交于 2019-12-13 07:03:17

问题


I am using jQuery's animate() method in my Rails application.

However, I can't get it to work.

This is my application.js file:

//= require jquery
//= require jquery_ujs
//= require_tree .

I tried adding //= require jquery-ui in there but it is causing my application to crash:

couldn't find file 'jquery-ui'

Can anybody tell me what I am missing? Thanks for any help.


回答1:


You need to add 'jquery-ui-rails' in your Gemfile for jquery-ui related plugins to work. Please add the following line to your Gemfile:

gem 'jquery-ui-rails'

After adding this gem, please run bundle command:

bundle



回答2:


You have version 3.0.1 of jquery-rails / last version now 3.0.1 (you can see version of gem on Gemfile.Lock).

You don't put //= require jquery-ui because jquery-ui has been remove from gem jquery-rails (3.0.0+) see commit. If you need jquery-ui, you could use jquery-ui-rails gem.


I tried jquery animate() and it's works. I'm on rails 3.2.13, ruby 1.9.3 and gem 'jquery-rails' on Gemfile.

Here's my source code

<script type="text/javascript">
$(document).ready(function() 
 {
    $('.logo .active-image').animate({
       opacity:1,          //set opacity
       marginTop: "-90px", //move the image 'up' 90px
       }, 5000);           //animate over 5 secs
 });
</script>

<div class="logo">
     <%= image_tag("asus_2.jpg", :class => 'active-image', :height => '100', :width => '123') %>
</div>

I think error existing on your jquery function. You should check console on your browser (inspect element > console) and you can see error log. You could post error on your question.




回答3:


OK, finally found the solution:

In fact, it's not enough to just add gem 'jquery-ui-rails' to your gemfile. You also need this line in application.js:

//= require jquery.ui.all

More info can be found here.

Thanks everybody for your help!



来源:https://stackoverflow.com/questions/17008665/how-to-get-jquery-animate-to-work-in-rails-3-2-8

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!