jquery-animate | 易学教程

jquery .animate() collision detection

阅读更多关于 jquery .animate() collision detection

I'm using animate to move a div within a grid of divs. As a test I am setting some of the grid divs as obstacles. If the animated div collides with one of the obstacles I want to end the animation. A plug in is fine or a snippet of code. I kind of suspect I am sniffing up the wrong tree with .animate() so any shove in the right direction or improvement on what I am doing is appreciated: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta charset="utf-8"> <title>Game Test</title> <!-- meta tags -

Force jQuery animations to use integer values

阅读更多关于 Force jQuery animations to use integer values

问题 Is there a way (keeping forward-compatibility in mind) to force jQuery animations to use only integer values amidst an animation? I'm animating an element's width. <div style="width: 25px">...</div> I look at the element in the inspector while it's in the middle of animating, and often the value has massive granularity decimalwise. <div style="width: 34.24002943013px">...</div> It only 'calms down' to integers once it's reached its goal. <div style="width: 50px">...</div> Usually I wouldn't

Rotate multiple images in a circle using jquery

阅读更多关于 Rotate multiple images in a circle using jquery

问题 I need to rotate multiple images in the same orbit circle using jquery.I changed and delayed the time intervals for both the images. The problem is both the images are overlapping after few seconds. my code is <script type="text/javascript"> var p = 0; function moveit() { p += 0.02; var r = 135; var xcenter = 500; var ycenter = 200; var newLeft = Math.floor(xcenter + (r * Math.cos(p))); var newTop = Math.floor(ycenter + (r * Math.sin(p))); $('#friends').animate({ top: newTop, left: newLeft, }

Jquery Animate text with smooth flash like animation

阅读更多关于 Jquery Animate text with smooth flash like animation

I haven't found any answer to this in a reasonable amount of time on this forum. So here I ask. I'm trying to animate a text from left to right with the ease 'swing', but at the same time, make it fade in, then fade out before the end. I found a solution in three steps but I find it very hard to maintain and modify. With this technique it is also impossible to use the swing easing. What I do is: animate left +=10 and opacity from 0 to 0.8 in the same animation for 1 sec. animate left +=20 for 2 sec. animate left +=10 and opacity from 0.8 to 0 for 1 sec. In code: $("#teaserText").show().animate

Animating opening/closing of table columns in jQuery

阅读更多关于 Animating opening/closing of table columns in jQuery

问题 How can I animate the opening/closing of table columns in jQuery? I currently have this piece of code: jQuery(function($){ $(".togglebutton").click(function(e){ if (cost_visible) { $(".numbers").animate({width: 80}, 1500); $(".costs").animate({width: 0}, 1500); } else { $(".numbers").animate({width: 0}, 1500); $(".costs").animate({width: 60}, 1500); } }); }); and my HTML containing standard TABLE/TR/TH/TD tags with the TH and TD tags carrying the class names used to identify what has to be

Javascript glow/pulsate effect to stop on click

阅读更多关于 Javascript glow/pulsate effect to stop on click

问题 I have the following Javascript to make a text link glow/pulsate continuously. This link reveals another section of the same page so I would like it to stop once the user has clicked on it. <script type="text/javascript"> $(document).ready(function() { function pulsate() { $(".pulsate").animate({opacity: 0.2}, 1200, 'linear') .animate({opacity: 1}, 1200, 'linear', pulsate); } pulsate(); }); </script> So basically, I just need to know what I need to add here so that the effect stops once it

jQuery: fade in/out + animate elements

阅读更多关于 jQuery: fade in/out + animate elements

I'm using jQuery to fade in/out some elements and change the opacity of the others. $(function(){ $('.image').each(function() { $(this).hover( function() { $(this).stop().animate({ opacity: 0.3 }, 'slow'); $(this).siblings().fadeIn('slow'); }, function() { $(this).stop().animate({ opacity: 1 }, 'slow'); $(this).siblings().fadeOut('slow'); }) }); }); You can see the full code at http://projects.klavina.com/stackoverflow/01/ (I'm also using the jQuery Masonry plugin on the page). I'm fairly new to JS/jQuery and the above code doesn't work well, unless I mousover the .image element really slowly.

.animate with a curve

阅读更多关于 .animate with a curve

问题 First take a look: The cat needs to move to the x in a curve . (see the arrow) When the cat hits the x, it should stay 10 seconds, and after that the cat should go back to o, again in a curve, and repeat. I tried it with this code: function curve() { $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() { $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() { curve(); }); }); } curve(); But the cat is moving like this: Is there a way to get the cat

Animate an element to the size of screen in fixed position

阅读更多关于 Animate an element to the size of screen in fixed position

How do I animate a <div> to expand to fit the screen upon clicking. All while staying in fixed position, then revealing the contents of that <div> Image: Set a CSS3 transition to your element. Create a class that makes your element 100vw and 100vh (viewport width height units) Add that class on click $("#box").on("click", function() { $(this).toggleClass("fullScreen"); }); html, body{height:100%;margin:0;} /* YOUR BOX */ #box{ position: fixed; overflow: hidden; /* in order to contain content */ /* The initial styles: */ border-radius: 25px; background: red; left:50px; bottom:50px; width: 50px;

toggle() an animate() with jquery

阅读更多关于 toggle() an animate() with jquery

this is a super easy question. I know basically what I want and how to do it, I'm jusy not sure what selector to use in a certain part. The animation works fine if I take away the toggle() function, but it only works to open the menu, not to close it. Here is my jquery code $(document).ready(function(){ $('#menu_button').click(function(){ $(????).toggle(function(){ $('.sidebar_menu').animate({left:'0'}, 'slow'); $('.wrapper').animate({'margin-left':'250px'}, 'slow'); }); }) }); And here is my page code: <div class="sidebar_menu"> <h2>Menu</h2> <h3>1. Escolher produto</h3> <ul> <li>Entradas</li