jquery-animate

问题 I need a rather atypical jquery easing function. It's basically the opposite of your traditional easeInOut easing because I want the process to go from a fast intro to a slower middle part to a fast outro (you might call it speedInOut). Unfortunately my math is a little rusty and I need someone to point me in the right direction in terms of how to get started. A hyperbolical sinus curve (sinh) goes somewhat in the right direction of what I'm looking for , but I need it limited between 0 and 1

问题 I'm building a site and in the header there is a mail icon. When you click the icon an input field and submit button appear so people can sign up for a newsletter. Is there a way to use width instead of using display:none and display:inline? So when you click the mail icon the input field is animated to slide out from the left rather than just instantly appear? Here's the javascript code im using... <!--Show & Hide Script Start--> <script language="JavaScript"> function setVisibility(id1) {

问题 In all the tutorials I found around the web on animating scrolling of the page with jQuery, I found that most of them are using the following code to do that: $("html, body").animate(.... I was trying to find out why it's needed to animate 2 objects: html and body, but not luck. I might think it's needed to cover all major browsers… But why really, can someone explain please? 回答1: chrome/safari uses html to animate, while firefox uses body (might be the other way around, don't remember!) You

问题 I want to animate some text in a slow and subtle way. jQuery animations work with integer values, so if you want to animate a size over say 10px in two seconds, you see a series of small steps at five FPS which looks jerky. Here's a jsFiddle that shows what I'm talking about. I found a similar question about animating positions, but the top / left /etc properties are integral, and so the accepted answer says it's not possible. However font-size can be animated as a real number, if jQuery will

问题 I am using jQuery animate to slide in items on a web page. For some reason, only in webkit browsers, there is a trail of artifacts across the space the element was animated over. Is there a way to stop this from happening or hide it? They are seen on the carousel once you load the page here: http://www.mywebclass.org/~jeff/ 回答1: In your animate callback, scroll down 1px then back up 1px: $(this).addClass('active'); scrollTo(document.body.scrollLeft, document.body.scrollTop + 1); scrollTo

问题 I want to give user the option to rotate the content of my webpage, including images, text and divs. Is this possible? PS: I want to rotate the entire webpage. Not just a container div. 回答1: You could use CSS3 -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); http://jsfiddle.net/KdNNy/1/ Doesn't work on all browsers though. This example is only for firefox and chrome/safari. Opera should have it as well. Maybe even IE EDIT And just in case anyone thinks "oh he's just rotating a

问题 I'm trying to animate an image of a box by changing it's position on mouseover. I can get it to move once but I need to set it up so that it moves everytime someone mouses over the image. I want to make the users 'chase' the box around the screen. Preferably the animation would loop so that a user can never catch the image ? Here is an example of what I have so far, and below is my jQuery code: $(document).ready(function() { $('#img').mouseover(function() { $(this).animate({ left: '500px' });

问题 I have a table where last column contains action buttons which opens another section under the table. When that section is opened the body page remain where the button from action column was pressed. I need to use a jQuery preferably with .animate which scrolls .html page to that opened section under the table. fiddle example: http://jsfiddle.net/Ksb2W/110/ If anyone cand help me with this. Thank you. 回答1: demo http://jsfiddle.net/h4ZQR/ or http://jsfiddle.net/byRRY/ Good API: http://api

问题 i wanna dynamically change the link color within a hover event. I got the following code so far but it doesn´t work. Any suggestions why? In my oppinion it seems to be right... $('.fadelink').hover(function(){ $(this).animate({ color: '#333' }, 600); }, function(){ $(this).animate({ color: '#999' }, 600); }); 回答1: You have to add colors plugin to make it work. That is stripped from core. 回答2: jQuery doesn't support animation of colors, but it can with the color plugin: http://plugins.jquery

问题 I have looked at the source code in jquery for slideup... // Generate shortcuts for custom animations jQuery.each({ slideDown: genFx("show", 1), slideUp: genFx("hide", 1), slideToggle: genFx("toggle", 1), fadeIn: { opacity: "show" }, fadeOut: { opacity: "hide" }, fadeToggle: { opacity: "toggle" } }, function( name, props ) { jQuery.fn[ name ] = function( speed, easing, callback ) { return this.animate( props, speed, easing, callback ); }; }); I understand that this is shorthand for functions,