Develop Reference

Implementing slide down animation with "Element.animate()" method

I tried to implement the slide down animation by Element.animate():
errorsMessagesCollapsableContainerMountingPoint.replaceWith(errorsMessagesCollapsableContainer);
errorsMessagesCollapsableContainer.animate(
[
{ height: 0, overflow: "hidden" },
{ height: "auto", overflow: "visible" }
],
{
duration: 2000
}
);
but it is not smooth:
Something that I missing in Animation API usage?
The HTML of errors list is just <ul><li>...</li></ul>.
Update
From this post, I knew that animation works only numeric amounts.
I replaces my code with:
// The `clientHeight` could not be retrieved without being mounted
errorsMessagesCollapsableContainer.style.overflow = "hidden";
errorsMessagesCollapsableContainer.style.visibility = "hidden";
errorsMessagesCollapsableContainer.style.position = "absolute";
errorsMessagesCollapsableContainerMountingPoint.replaceWith(this.#errorsMessagesCollapsableContainer);
const errorsMessagesCollapsableContainerHeight: number = errorsMessagesCollapsableContainer.clientHeight;
errorsMessagesCollapsableContainer.style.visibility = "visible";
errorsMessagesCollapsableContainer.style.position = "static";
this.#errorsMessagesCollapsableContainer.animate(
[
{ height: 0 },
{ height: errorsMessagesCollapsableContainerHeight }
],
2000
);
but animation still not smooth.
Please not that this question is focused on pure JavaScript Element.animate() solution, not CSS animation or third-party solutions.

Judging from your picture you have  ( duration: 2000 ) works as a delay, not the duration of the animation. Try simply applying transition to this class in the styles

jQuery slide animation on existing divs after prependTo

I have this semi-slider-style UI where new terms are added in from the left: http://jsfiddle.net/v4v5cvkz/. I'm using the jQuery prependTo function to do this. My issue is that I want the terms that are already displayed to perform an animated slide to the right when a new term gets added, rather than suddenly "appear" in the correct position. I did try adding a "displayed" class to terms that had successfully shown up, and tried adding a slide-to-right animation after that, but that didn't quite achieve the effect I was going for (the "displayed" objects were moved much further to the right than I expected).
Here is the problematic code (you'll probably want to view the fiddle to see it in context though):
function addToStream(term, delay) {
setTimeout(function(){
$("<div />")
.addClass("stream_term")
.html(term)
.css({
opacity: 0
})
.prependTo("#stream_terms")
.animate({opacity:1},
{ duration: 1000,
complete: function() {
$(this).addClass("displayed");
}
});
}, delay);
}
Any help here would be greatly appreciated. Thank-you!
*Note: I have access to jQuery UI in my code, though it isn't linked in the fiddle. Also, if anyone knows of a plugin that can do this sort of thing better than I can, please let me know. The closest one I was able to find was Fraction Slider, but I didn't find it obvious how to create a similar UI with it (it might also be overkill for my purposes).

Here's a way to do it:
function addToStream(term, delay) {
setTimeout(function(){
var newDiv = $("<div />");
newDiv.addClass("stream_term")
.html(term)
.css({
opacity: 0,
display: 'none'
}).prependTo("#stream_terms");
var width = newDiv.width();
var height = newDiv.height();
newDiv.css({
width: 0,
height: height,
display: 'inline-block'
})
.animate({
width: width,
margin: '0 10px',
padding: '5px 10px'
}, 1000)
.animate({opacity: 1}, 1000, function(){
$(this).addClass("displayed");
});
}, delay);
}
It also needs the following CSS changes:
.stream_term {
padding: 0;
margin: 0;
overflow: hidden;
}
DEMO: http://jsfiddle.net/StathisG/hqg29p6r/1/

smooth button grow and button shrink animation on hover

I am trying to make a fairly simple animation; on mouse over, the button will animate to be bigger. When not hovering, it will return to it's original size. However, whenever when I try this sample code, it warps the button to odd sizes
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
'height': $(this).height() * 2,
'width': $(this).width() * 1.3
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
height: $(this).height(),
width: $(this).width()
}, 300);
});
http://jsfiddle.net/RBLqY/1/
how could this problem be solved?

I'm not entirely sure why your code is failing, seems like you have some sort of calculation error when returning to the original size. After fiddling around a bit I found this solution. By animating the padding instead of the height and width you don't have to worry about the height width ratio when it comes to resizing the link.
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
padding: '12px'
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
padding: '7px'
}, 300);
});
jsfiddle
Hope this helps.

Possible to toggle/animate between two sizes using jQuery?

Basically I have a small div that is initially styled to 60x60. I have created click event that animates the expansion of the div:
$("#myDiv").click(function () {
$(this).animate(
{
width: "350px",
height: "300px"
}, 500);
}
I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?
I found the toggleClass function but I don't think this will work with animiate.
You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/

$("#myDiv").toggle(function() {
$(this).stop().animate({
width: "350px",
height: "300px"
}, 500);
}, function() {
$(this).stop().animate({
width: "60px",
height: "60px"
}, 500);
});
Example.
The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.
More about toggle() here.

just to be different :
var size=[];
$("#cornerBox").click(function(){
$(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
$(this).stop().animate({ width: size[0], height: size[1] },500);
});
Fiddle: http://jsfiddle.net/NS9Qp/1/

I ended up using jQuery UI's animated toggleClass effect: http://jqueryui.com/demos/toggleClass/
super simple code:
$('h2').click(function() {
$(this).next().toggleClass("hidden", 1000);
});

Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).
<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>
<script type="text/javascript">
var div = $('#myDiv');
div
.attr('defWidth', div.width())
.attr('defHeight', div.height())
.toggle(function() {
$(this).stop().animate({width: "350px", height: "300px"}, 500);
}, function() {
$(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
}
);
</script>

What I do for cases like this, is store a transformation array.
var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};
Then, store a toggle between 0 or 1, and use the corresponding values for the animation.
EDIT: combine this with the previous example of toggle, and you've got yourself a solid working solution!

Jquery - get the real dimension of the image or a way to be compliant if no js

Hello
The context is a gallery and a page of thumbnails
The goal of the script is to minimize the thumbnails and on hover to display them with their original size.
The script do it well :
-get the minimum size of thumbnails
-define this minimal size for all thumbnails
-on hover increase z-index and define the size as the original size of this thumbnail
but if the javascript is disabled it's a mess because each thumbnails has is own size
If I define the same size for all thumbnails by CSS or in html -in order to be compliant if there is no js-, the script will take this as the original size of the thumbnails, whereas it's not the real size of the picture.
the code is :
<script type="text/javascript">
jQuery(window).load(function(){
var min_dim_width = 10000;
var min_dim_height = 10000;
$("ul.thumbnails img").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
if ($.data(this,'size').height < min_dim_height)
min_dim_height = $.data(this,'size').height;
if ($.data(this,'size').width < min_dim_width)
min_dim_width = $.data(this,'size').width;
});
$(".thumbnails img").each(function () {
$(this)
.css('width', min_dim_width+'px')
.css('height', min_dim_height+'px')
$(this).parents('li')
.css('width', min_dim_width+5+'px')
.css('height', min_dim_height+5+'px');
}).hover(function() {
if ($.data(this,'size').height == min_dim_height)
{
new_dim_height = min_dim_height*1.2;
}
else
{
new_dim_height = $.data(this,'size').height;
}
if ($.data(this,'size').width == min_dim_width)
{
new_dim_width = min_dim_width*1.2;
}
else
{
new_dim_width = $.data(this,'size').width;
}
$(this).parents('li').css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-'+new_dim_height/2+'px',
marginLeft: '-'+new_dim_width/2+'px',
top: '50%',
left: '50%',
width: new_dim_width, /* Set new width */
height: new_dim_height, /* Set new height */
padding: '10px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function() {
$(this).parents('li').css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: min_dim_width, /* Set width back to default */
height: min_dim_height, /* Set height back to default */
padding: '5px'
}, 400);
});
});
</script>
thx for reading this and all my consideration if you succeed !
we can see it in action right there : http://www.planete-flop.fr/gallerie/index.php?/category/12
PS : reformulation of my "problem"

Well... I don't know if it's what you are looking for but... generally it's a good idea to set the image's dimensions in the html markup itself... as in:
<img src="cheese.jpg" alt="an image" title="whee!" height="100" width="200" />
You can override w/ JS if it is supported. Otherwise, at the least you get some predictability for your layout (even if the thumbs appear skewed).
Hope it helps!

Just find the correct size on the server
http://php.net/manual/en/function.getimagesize.php