jquery-animate | 易学教程

CSS3 Rotate on animated element causing click event not to invoke

阅读更多关于 CSS3 Rotate on animated element causing click event not to invoke

问题 Okay this one is causing me a lot of problems. When using the css3 -webkit-transform style with any kind of 3d rotation (such as rotateY(30deg) ), it is extremely unreliable to bind a click event to this rotated object. See the example code below or look at this fiddle (to see the unreliability in fiddle, click on the right side of the element). This example does not have animation but still is affected. html: <div id='box1'>Click this box.</div> css: #box1{ -webkit-transform: rotateY(30deg);

Animate Divs One Right After the Other with Jquery

阅读更多关于 Animate Divs One Right After the Other with Jquery

问题 Im trying to animate multiple divs, fading in, one right after the other in sequence when the page loads. I also want to do it in reverse, fading out in sequence, when i click to go to another page. How do i go about setting this up in jquery? 回答1: Kind of hard to give you an example since there are so many ways to animate in jQuery, but here's a simple example. Animating two <div> s, one after the other (on page load): See working example here: http://jsfiddle.net/andrewwhitaker/p7MJv/ HTML:

Use css calc() in jquery

阅读更多关于 Use css calc() in jquery

问题 How can I do this? $('#element').animate({ "width": "calc(100% - 278px)" }, 800); $('#element').animate({ "width": "calc(100% - 78px)" }, 800); I can do it if it's only % or only px , but not calc() , can I use some other option of jQuery? or some other trick of JavaScript? It's a change that have to be done when the user clicks some element, so: $("#otherElement").on("click", FunctionToToggle); when the user clicks the $("#otherElement") the toggle effect has to occur. 回答1: maybe this helps:

How does jQuery have asynchronous functions?

阅读更多关于 How does jQuery have asynchronous functions?

问题 I'm surprised I can't find a clear answer to this. So, in jQuery, you can do this: $(someElements).fadeOut(1000); $(someElements).remove(); Which, will start a fadeOut animation, but before it finishes executing in the 1 second duration, the elements are removed from the DOM. But how is this possible? I keep reading the JavaScript is single threaded (see also: Is JavaScript guaranteed to be single-threaded?). I know I can do either: $(someElements).fadeOut(1000).promise().done(function() { $

jQuery animate() and CSS calc()

阅读更多关于 jQuery animate() and CSS calc()

问题 I tried to set CSS calc() using jQuery animate, for example: $element.animate({ height: 'calc(100% - 30px)' }, 500); and I noticed that calc() is not working with jQuery animate... I hope that there is a way to do it, I don't want a similar way to do it, an alternative or a workaround, I want to set calc() Is this impossible? In any way? If it is possible, please can you show how? 回答1: Setting calc() like you want won't work. The easiest way to do it is to "calculate" it's value into a

Jquery animate background code not working!

阅读更多关于 Jquery animate background code not working!

问题 See I have a jquery code which I thought that it should work but still it's not working! So please can help me out. Th input have original background color #fff and I want that on focusing that input the background color should change into #789 with a fade effect. Here is the code that I have made. $('input.login_reg_input').focus(function () { $(this).animate({ backgroundColor:fadeColor }, 250, 'linear', function() { }); }); I have search through the stackoverflow and had not found a good

Easiest way to animate background image sliding left?

阅读更多关于 Easiest way to animate background image sliding left?

问题 What's the best way to animate a background image sliding to the left, and looping it? Say I've got a progress bar with a background I want to animate when it's active (like in Gnome or OS X). I've been playing with the $(...).animate() function and trying to modify the relevant CSS property, but I keep hitting a brick wall when trying to figure out how to modify the background-position property. I can't just increment its value, and I'm not sure if this is even the best approach. Any help

unbind click, but keep eventPreventDefault();

阅读更多关于 unbind click, but keep eventPreventDefault();

I'm trying to us unbind a click on an animation until the animation finishes to keep overlapping animiations from happening. The unbind works fine, but of course, then the event.preventDefault stops working and my button/link becomes active again. I'm not sure how to work my way around this. Shortened version of the code is: $('a.Next').bind('click', SlideFwd); function SlideFwd(e){ e.preventDefault(); $('a.Next').unbind(); $('ul.GridviewList').animate({ left: '-=800px' }, 'slow', function() { $('a.Next').bind('click', SlideFwd); }); }; and the html is: <div> <div class="SlideControl"> <p

jQuery: Animate (fade) background-color or image in div when hover a link?

阅读更多关于 jQuery: Animate (fade) background-color or image in div when hover a link?

问题 I want to create a menu such as on redhotchilipeppers.com. When you hover a link in the top right the background color of the whole page change. The original image is still in the back, it's just the color that changes. Below you can see how I tried to accomplish it. It's fades way too slow and when I hover one link and then another it first fades to the first links bg color and then back to normal and then to the second links bg color. On redhotchilipeppers.com the bg colors fades right away

Using jQuery To Animate Inserting Text Into Div

阅读更多关于 Using jQuery To Animate Inserting Text Into Div

Is it possible with jQuery to use animate , to fill a div with content smoothly, i.e. animate the height of the div growling larger as I insert content? For example (HTML): <div id="my-div"></div> Then (JavaScript): $("#my-div").html("some new really long string of text which makes the div height increase."); I would like to animate the insert of the html, and thus the height increase. If you want to truly animate the text in, you would have to slowly append the text, one letter at a time. You can get a similar effect by using what others have mentioned already, .slideDown() http://jsfiddle