jquery make div with image get smaller - javascript

Hey guys i got an image inside a div and iam moving it down at a specific time by giving it a delay. I was just wondering when it is moving down how do i make it become smaller as it goes down the screen till eventually it disappears completely at a specfic location i gave it.
So far this code makes it move down with a delay function on it and a duration.
$('#fourth').animate({
width: '100px',
height: '100px'
}, 3000, function() {
$(this).show('fast').animate({
top : '-=-100'
},
{duration: 2000}
)
Thanks for all the help

Just add the width and height to the animate.
$(this).show('fast').animate({
top : '-=-100',
width: 0,
height: 0
},
{duration: 2000})
http://jsfiddle.net/xMV5Q/1/
Also, -=- is the same as += which is a bit more understandable.

Related

How to do 2 animations at once with jQuery

I'm working on a web project. I want to draw a div element (looks like a table) with an animation: I click on the button, then the div element appears with a small size upon the button, then it floats to "its" posion meanwhile gaining its original size.
I managed to do this, but only sequentely. First the scaling, than the floating. I want these animations to do at the same time.
I use jQuery ui show() function to make the div appear and scale to its origin size, then I use the jQuery animate fuction for the floating.
I tried to use the queue : false property. And I also called the .dequeue() function, but it woulnd't work as I wanted so.
I'll appreciate any pieces of advice. Thanks in advance. Cheers.
$('#matrix').animate({
top: positionTop,
left: positionLeft,
});
$('#matrix').show("scale", { percent: 100, direction: 'both', origin: ['top', 'left'] }, 2000);
$('#matrix').animate({
top: positionTopAim,
left: positionLeftAim
});
Fiddle here: LINK
var $matrix = $('#matrix');
// store original size
var size = {
width: $matrix.width(),
height: $matrix.height()
};
$matrix.animate({
top: positionTop,
left: positionLeft,
});
// Sets the width and height to 0
$matrix.width(0).height(0).show();
// animates into original size
$matrix.animate({
width: size.width,
height: size.height
}, {queue: false});
$matrix.animate({
top: positionTopAim,
left: positionLeftAim
}, {queue: false});
queue: false does the stuff
Here's the workaround
For further working with jQuery, prevent yourself from using the same selector twice/more-than once. It's not efficient. There's a formal directive to store the jQuery object into variable called "$something".
For more information visit this site.
Good Luck ;)

Scaling image causes temporary jitter

This may be a duplicate question; I wasn't exactly sure how to word it so I wasn't able to find an answer.
I'm using jQuery to make an image pop out when the page loads. See http://jsfiddle.net/KT728/
The issue is that when the image reaches its final size, the edges are jittery/rough for a second or two, after which they become smooth. I've noticed this in Safari and Firefox so far. Here's the code for the animation:
$(document).ready(function() {
$("img").animate({
opacity: 1,
width: "300px",
height: "300px"
}, 400, "swing", function() {
$("img").animate({
width: "200px",
height: "200px"
});
});
});
I'm using PNG images that are 512px by 512px, scaled down anywhere from 10 by 10 to 300 by 300.
Would converting the PNG images to SVG format solve the issue, or at least make it less obvious? Are SVG images supported by most recent browsers?

JQuery - IF statement only works two to three times

I'm trying to make this page working that has a vertical line of pictures (thumbnail-sized) which you can then click on to make them scroll to full width and show lots of text and happy stuff.
I've already managed to do all that. However, if I click on one thumbnail, any open thumbnails are supposed to close. I've implemented an IF statement and class-checking for that:
$("a#shins-rec1").clickToggle(
function(){
if ($(".shins-rec").hasClass('done')) {
$(".shins-rec").filter($(".done").not($(this))).animate({
left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done');
});
} else {
$(this).parent().animate({left: 0, width:'100%'}, 250, function(){
$(this).addClass('done')
});
};
},
function(){
$(this).parent().animate({
left: $(this).parent().width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done')
}); // even clicks
});
which works all fine, but after you clicked two or three times on different thumbnails to open them and close the other ones, the already open thumbnail gets stuck and the clicked thumbnail opens as it should open. You have to click on the clicked thumbnail to close the other one, and then you have to wait some time till you can click the clicked thumbnail to properly close it again. After that it just stays like this.
I've already tried doing it with a plugin called Summer of GOTO, because I think it has something to do with checking whether there are any "done" classes or not, so I wanted to make it re-check stuff using goto in JQuery. Using a WHILE statement didn't work either, but that could be because I don't understand that function.
Anyone knows how to solve this?
Thanks in advance.
EDIT: : JSfiddle of what I'm working on
It looks like the click even which you fire on each thumbnail has same ID, ID of the element suppose to be unique, you can use class instead like this
$("a.shins-rec1").clickToggle(
function(){
if ($(".shins-rec").hasClass('done')) {
$(".shins-rec").filter($(".done").not($(this))).animate({
left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done');
});
} else {
$(this).parent().animate({left: 0, width:'100%'}, 250, function(){
$(this).addClass('done')
});
};
},
function(){
$(this).parent().animate({
left: $(this).parent().width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done')
}); // even clicks
});
I've finally gotten the answer to my problem, someone on another forum kind of rewrote my code because it was messy and things were repetitive and they solved the stuckness.
Here is the JSfiddle in case anyone wants to look into it.
For some reason the orientation of the thumbnails changed which made a 0 value for "left" position the thumbnail in the center and a 240 or similar made it shift to the right. But I simply changed that by switching the left-values and changing the 240 or similar into a negative number, as seen below.
var rightPos = -1 * ($('div.content-ins-used').width() / 2 - 60);
Thanks anyway for your help!

Improving smoothness of multiple jQuery animations

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.

Sensitivity of mouseOver in a Jquery simple FishEye script

After having troubles with a jquery fisheye plugin I've decided to develop a similiar script by myself. (It's also a good practice).
Anyway , I wrote 2 jquery functions based on the Animate() function.
minimizeBubble
return the bubble to its default size
maximizeBubble
make the bubble bigger , higher and display another picture as well (a
title for that bubble)
jQuery.fn.maximizeBubble = function(){
$(this).animate({
marginTop: '-300px',
width: '300px',
}, {
duration: 200,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "inline");
}
});
}
jQuery.fn.minimizeBubble = function(){
$(this).animate({
//top: '+=5',
marginTop: '0',
width: '80px',
}, {
duration: 100,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "none");
}
});
}
I also wrote the next code:
I know that the .each() function in this case is not neccessery because
there's only one big bubble at a time.
$(document).ready(function() {
//First , the middle one will be big as default.
$('#auto_big').maximizeBubble();
//mouseOver - make it big , onMouseout - Stay Big (do nothing)
$('.dock-item2').mouseover(function() {
//mouseOver on another bubble- minimize the other one and maximize the current
$('.dock-item2').each(function(){
$(this).minimizeBubble();
});
$(this).maximizeBubble();
});
});​
(A jsFiffle for my code: http://jsfiddle.net/T7gCL/1/)
The problem , as you can see at: http://jsfiddle.net/T7gCL/1/embedded/result/ that
when you move your mouse to the next bubble , all the bubbles are starting to "get crazy".
1.Do you know what's the reason for this behaviour?
2.How can I solve it?
3.do you have any suggestions of how to improve my code (for instance: instead of each())?
Part of the reason there is so much hopping around is that you're positioning the images absolutely and then resizing them. I'm not sure what the application calls for but I would try floating them for now. The animation behavior is like a chain reaction which makes me draw the hypothesis that when the image resizes it is propagating the onMouseover event to the images it is overlapping. The floating layout may fix this.
Update
This works better but might not be exactly what you're trying to do
$('.dock-item2').mouseenter(function(event) {
event.stopPropagation()
$(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
event.stopPropagation()
$(this).minimizeBubble();
});
You still need to rework the way you're organizing the images in their containing div

Categories

Resources