jquery-animate

问题 I have this code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { function loop(){ $('#picOne').fadeIn(0).fadeOut(8000); $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000); $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000); $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000); } loop(); }); </script> But when the last pic fades out, the code doesn't repeat. What is the problem? 回答1

问题 What I want to do can be accomplished just by using: slideDown("fast"); However, I don't like how it reveals the element, I would like for it to be 100% of the elements original height, and roll down. I'm wondering if there's an easy way of doing this? Other than perhaps changing the margin-top and such, then animating it back to normal. Example of what I want to do: http://jsfiddle.net/7dary/1/ However I would like to have it just do all of the calculations automatically, and it not show in

问题 I would like to move the animation from HTML to css. I would like to add it as an animation only when you hover over <circle id="circle".. <svg height=600 width=800> <g> <circle id="circle" cx="400" cy="300" r="130" /> <path id="arc" d="M395 170.1 A 130 130, 0, 1, 0, 400 170 Z" stroke="green" fill="transparent"/> <text id="circleText" width="500"> <textPath id="circleTextPath" xlink:href="#arc" startOffset="48%"> Resume <animate attributeName="startOffset" from="48%" to ="90%" begin="0s" dur=

问题 I am currently building a web app where I need to randomly generate text content and switch its color every time a button is clicked. At the moment, I'm trying to add some kind of animation to it, and here's what I'd like to obtain each time the button is clicked: The random class is added The div pops up from the bottom of the page with its opacity increasing I prepared a simplified JSFiddle to illustrate my point below. Example http://jsfiddle.net/cdacx0tn/11/ var color = ["blue", "purple",

问题 Anyone know why the below would not work. If I just set the css directly without animate it works. //div.css( {backgroundPosition: "bottom left"} ); $("#menu li").bind("mouseover", function(){ var div=$(this).find('div'); div.css( {backgroundPosition: "bottom left"} ); div.stop().animate( {backgroundPosition: '25px 0px'}, {duration:500} ); }) .mouseout(function(){ var div=$(this).find('div'); div.stop().animate( {backgroundPosition: "0px 0px"}, {duration:500} ); }); 回答1: you have to set the

问题 I'm using jQuery .show() to animate adding extra DOM elements to a page, and when each is added, I would like the elements below to gracefully slide down in the same way. Unfortunately, the other elements have their positions defined with CSS !important flags, meaning they cannot be moved by the sliding animation without the animation itself also setting the !important flag at every animation step. Is there any way of doing this? Unfortunately, it is completely technically impossible for me

问题 I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post. Before I ask, below is my jQuery code im having issues with. $("a").click(function() { if(this.hash){ $("#main").animate({ scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120 },2000,"easeOutExpo"); } }); Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my

问题 There are a lot of jQuery color plugins. However I couldn't find the one to animate between css class declarations. For example doing a smooth animation from .class1 to .class2 : .class1 { background-color: #000000 } .class2 { background-color: #000088 } Is this possible at all? 回答1: The jQuery animate() command already allows you to animate colour transitions. Here's a more striking demo EDIT: To get the same effect with CSS classes, there is jQuery UI's switchClass(add, remove, duration)

问题 I'm using jQuery's animate() and it just doesn't work. I'm trying to get a div to slide off another div that's containing it and has overflow:hidden . I've tried every combination of left on the animate and nothing. Just to make sure, I also tried changing the width of the div (gallery) and it does change the width, but not the left. What am I doing wrong? function an() { //$('#gallery').fadeOut(); //$('#gallery').animate({left:'-=1000'},'slow'); $('#gallery').animate({ 'left': '+=100px' },

问题 I am using Animate.CSS and I am using the "hinge" effect to have an image fall off the screen. Works great in real browsers but of course not in IE 9 or below. Is there a way to make this effect work with jQuery or javascript? Or will I have to add a jQuery transition to fade the image out? Thanks! Code: HTML <img id="animate" class="fear" src="/2012/images/september/fear-sign.png" /> CSS .fear{ position:absolute; left:150px; top:0px; } #animate { -moz-animation-delay: 5s; -webkit-animation