I have an image, and when it is hovered on, I would like its width to increase using jQuery. I know how to do that, but now I would like to make this a slower effect, maybe 500 milliseconds long, not instant.
I know that it should be pretty easy, I just don't know the syntax.
How can this be achieved?
This is my current script:
$("#example").width("250");
EDIT: I came across another problem. I created two scripts, one for making the image larger and one for making it smaller. However, the script seems pretty buggy and unsmooth, and switches back and forth between big and small without reason. I am resizing it using onmouseover and onmouseout.
//Bigger
$("#example").animate({width: 250}, 200 );
//Smaller
$("#example").animate({width: 200}, 200 );
This should be what your looking for, it will animate the width of the example div out to 250px at a speed of 500 miliseconds
$("#example").animate({width: 250}, 500 );
Hope that helps
EDIT: With regards to your updated question: http://jsfiddle.net/Hfs7L/2/
$("#example").stop().animate({width:250}, 500); // bigger
$("#example").stop().animate({width:200}, 500); // smaller
using jQuery .animate() and .stop()
Regarding your updated problem:
Try and get the animations out of the animation queue, so it doesn't have to finish before it can start a new animation:
//Bigger
$("#example").stop(true, true).animate({width: 250}, 200 );
//Smaller
$("#example").stop(true, true).animate({width: 200}, 200 );
$("#example").animate({width:'250'}, 500);
Related
Okay, I'm trying to make it so when you click a button it'll spin a div with it's randomized contents and it'll slow down on stop on a specified div, now I have no idea where to start,
Here is an example of what I'm trying to do,
https://www.youtube.com/watch?v=y7jjhLUKleg
Any idea how to start? what should my priority be, jQuery or Javascript?
Kind Regards
EDIT: I'm not asking for anyone to spoonfeed me code, I just need an idea on where to start.
The animation itself can be probably solved easily using JQuery Animate functions. The animation supports easing, and the "ease out" is what you need. With some CSS, you would create some kind of viewport, and move the elements from right to left until the animation stops.
Let me help you with some starting code: http://jsfiddle.net/dfevruws/1/
The animation command is very simple:
$(function() {
$( "#items" ).animate({
left: -2000
}, {
duration: 5000,
easing: "easeOutQuad"
});
});
Probably more interesting than this is how you handle the selected item, but this is a different story, you ask for the Animation.
I created this multi-layered animation that takes 4 images ("layers") and animates them to "zoom away". It usually runs smoothly but once in a while when the 3rd layer starts, the 2nd layer animation kind of lags. I'm not really sure why/when the lag happens - maybe due to GPU processing?
http://jsfiddle.net/3EwnB/3/
Is there anything I can do to reduce any animation lag?
And if there's a better way to achieve this effect I'm not stuck on using jQuery.animate - alternate suggestions are welcome.
The code for the jQuery animation (for 1 of the 4 layers):
setTimeout(function() {
$('#animation-layer-2').show().animate({
opacity: '0.9',
marginLeft: '-490px',
marginTop: '25px',
width: '950px'
}, { duration: 400, queue: false });
}, 500)
Also, in the JS Fiddle example, the images are 9-17kb but that actual images I'm using are 131-457kb. The image sizes don't seem to make much of a difference though.
Is there anyway to add a easing to a fixed element?, I've been looking around and I can't find an answer. I really don't know how it would be, maybe something like...
$(window).scroll(function() {
$("#form").animate({position:"fixed", easing: 'swing'});
});
Any help will be appreciated ^ ^ Thanks!
Edit:Pretty much what I'm looking for is when user scrolls, the fixed element obviously will follow the window position, but I want to add is a little delay in comparison to scroll action with an easing effect
You'd have to make that div absolute positioned, z-indexed and without parent, then move it on the scroll event. You can know the number of pixels scrolled with scrollTop(). Something like this:
$(window).scroll(function(){
var offset=100;
//stop is called so easing doesn't affect while it is still scrolling.
$("form").stop().animate({top:($(window).scrollTop()+offset)+"px"}, 300, 'swing');
});
Try this instead:
$("#form").animate({position:"fixed"}, 300, 'swing');
From the jQuery api ( http://api.jquery.com/animate/ ):
The only easing implementations in the jQuery library are the default,
called swing, and one that progresses at a constant pace, called
linear. More easing functions are available with the use of plug-ins,
most notably the jQuery UI suite.
$("form").animate({position:"fixed"}, 300, 'swing'); //swing being default
Hey guys,
I'm using some jQuery UI to show and image by scaling and fading it in at the same time!
jquery.ui.core.js
jquery.effects.scale.js
$('img').show( "puff", 1000, function(){$(this).stop();} );
I've modified the plug-in so the scaling reaches 200% and at that moment I stop the animation so that it keeps the double size.
From here on my wish is to fadeOut() the image in that 2X state however I can't trigger fading effect.
$('img').show( "puff", 1000, function(){$(this).stop().fadeOut();} );
does not work and neither
$('img').show( "puff", 1000, function(){$(this).stop()} ).fadeOut();
anybody with a solution?
10x and BR
use this in your call back
// set the value to 200%
$(this).css('some_property','200%');
$(this).fadeOut();
This way your stop doesn't need to be called
and at the end of the animation, the size will be set to 200% then starts fading out
I have a web page with animations (JQuery Animation) all over the place. A typical animation sequence may contain three or four objects animating independently at the same time. The issue I am facing is that the queuing of the animations is not predictable. Some of the animations are running simultaneously while some others are not.
I am doing something like
setTimeout(function(){
//animations
}, delay);
in many places just to try and group the animations. Even when using this, some of the animations inside the code block are not running simultaneously.
Is there any way to force animations to be run at the same time? Is there a way to fill up the queue with animations and then execute these at the same time?
Is there any comprehensive documentation of how this thing actually works?
EDIT: Sample code Warning: The code is messy
The question is looking at the code how do you know which of the animations are going to run simultaneously?
This run simultaneously (but not if there's already an ongoing animation on the object):
$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800);
And if you want to be 100% sure that it's animated right away (notice the queue:false):
$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800});
You can also do this. (It will still run simultaneously)
$('.blabla .1')
.animate({fontSize: 20},{queue:false,duration:800})
.animate({opacity: 0.4},{queue:false,duration:800});
This runs one after the other.
$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800);
So does this
$('.blabla .2').animate({opacity: 0.3}, 800, function() {
$('.blabla .3').animate({opacity: 0.3}, 800);
});
I hope that answers your question.
Sorry for all the edits, i'm new here.
Use the step option. You give it a function, and after each step of the current animation, it will execute that function. Thus you can animate there. Link to docs.