jquery-animate

jQuery Animation Toggle

由 懵懂的女人 提交于 2019-12-13 12:22:00
问题 This is a pretty straight-forward problem. I basically have a div block on a page that, when clicked, grows in size, and when clicked again returns back to what it was. My problem is that it just doesn't seem to work at all. Plus, I'm sure there is a much cleaner way to toggle between two animation states than an if statement like this, but I'm not sure how exactly to go about doing that. $(document).ready(function(){ var toggle = 0; $(".login").click(function(){ if($toggle == 0){ $(this)

CSS Transform not working properly on Firefox

由 人盡茶涼 提交于 2019-12-13 06:23:15
问题 I have this little animation but it does not behave properly on Firefox and it does not work at all on Explorer. The idea is that when you hover on the gray DIV, the red DIV will animate. On Firefox it runs only once when you reload the page and the cursor is hover on the gray area. If you want to make it work again it'll not animate. On chrome it works fine. Oh, before I forget, the animation basics is from animate.css http://jsfiddle.net/soporo123/8PDnA/5/ The HTML: <div id="box"> <div id=

Continuous Animation with jQuery, ajax and jsonp data

由 人盡茶涼 提交于 2019-12-13 06:04:22
问题 I have created a JavaScript file that reads jsonp data using ajax request. I am adding the elements in a tag and i am trying to add elements to an animation that moves elements the left continually. so i have: var url='https://www.example.com/json/list.json/?callback=jsonpCallBack'; setInterval(function() { $.ajax({ url : url, dataType:'jsonp', success: function(data) { var outputhtml='<ul>'; var item = []; for(var i =0; i < data.length-1 ;i++) { var item = data[i]; outputhtml+= '<li>'+item

jQuery z-index and animate problem

由 二次信任 提交于 2019-12-13 05:34:10
问题 I've got some code which animates my images on click and then adds a z-index to it. What I need now is to when I click the close button I need it to animate back to its original state and then change the z-index back to how it was. Currently it changes the z-index and then animates so it looks a bit strange Here's an example Is it possible to do? I've tried putting a delay before the z-index change but it still doesn't work Any ideas? 回答1: http://jsfiddle.net/hD72c/1/ updated and fixed All

jQuery: using class name selectors with the animate() method does not work

由 ￡可爱￡侵袭症＋ 提交于 2019-12-13 03:24:51
问题 I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website. I have put together a Plunker consisting of two pages (index.html and about.html) that are loaded smoothly, with the help of jQuery's fadeIn() and fadeOut() methods. I would like the About us page to not only be faded in, but scrolled down some 250px too. For this purpose, I have: added a class to the html tag in the About Us page: <html class="about"> added this in the

add animation to offset

由 a 夏天 提交于 2019-12-13 03:24:43
问题 I'm working on a simple app that move an element to a specific position. I succeed to move the element, but I want to add animation, while it is being move. I tried to use animate instead of offset but doesn't work. hope you help me. Thanks. $('button').click(function(){ var offset = $('.target').offset(); var object = $('.object'); object.offset({top: offset.top, left: offset.left}); }); .container{ width: 120px; height: 150px; text-align: center; } .target{ margin: 0 auto; width: 100px;

Jquery: How to do both successive and simultaneously animations

由 眉间皱痕 提交于 2019-12-13 02:59:08
问题 I want a screen-element (whose ID is #sign1 ) to move in a sinusoidal wave. For this I need successive UP-and-DOWN 'wobbles', all while it is simultaneously moving RIGHT. But I don't really understand queues , which are so necessary for successive animations. I can do 2 simultaneous animations, . . . e.g. moving UP and RIGHT at the same time, by putting queue: false on both, and I can do 2 successive animations, . . . e.g. moving UP, then later DOWN, by chaining .delay(1000).queue(function(n)

How to make percentage filling up with jquery + js

由 梦想与她 提交于 2019-12-13 02:49:07
问题 I am working on project to make percentage number increase and at the same time inside of the percentage number there is background color it needs to fill up according to percentage itself. So far it is working but only background animation of itself. I mean if its 50 percent it needs to come half of the 50% number. if its 100 it needs to make color all the background of 100% number. Here are the relative code of the html and css. var i = 0; var perc = 0; function buttonClick6() { perc += 5;

Bug with .animate()'s callback?

由 隐身守侯 提交于 2019-12-13 02:22:06
问题 I'm trying to make some div to animate, then in the callback, call another function. Nothing hard. Here's the code: function transfertMenu(){ var chosenOption = this.firstChild.firstChild.id; $('#leftMenucontent').animate({ left:'0px' }, 500, constructMenu()); $('#leftMenucontent > ul > li').remove(); chooseMenu(chosenOption); } and tried function transfertMenu(){ var chosenOption = this.firstChild.firstChild.id; $('#leftMenucontent').animate({ left:'0px' }, 500, function() { constructMenu();

jQuery resize div box at hover

由 末鹿安然 提交于 2019-12-13 02:21:39
问题 I've got two parts of code, to make 3 things: resize at one time only one of 6 .boxes div (with it's text content) make transparent .box divs which aren't selected show hidden .more span CODE: $('.content_area div').hide(); $(function(){ $('.box').bind('mouseover',function() { $(this).addClass('up'); $('.box').not('.up').fadeTo('normal',0.2); }); $('.box').bind('mouseout',function() { $('.box').removeClass('up').fadeTo('normal',1); }); }); initwidth = $('.box').width(); initHeight = $('.box')
订阅 jquery-animate