Develop Reference

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 ;)

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

element animation

i saw an effect in iconArchive site and i don't no how to apply it if one of you help me to get the idea with small example this will be nice.
under this link :http://www.iconarchive.com/search?q=share&page=3 if you go over the heart img then a copy of it will move to the bottom and add the icon you have selected. i have no idea how to start for that reason i don't have any code .
i think they use java script +jquery+ css to do it.

The jQuery animate function can do this neatly: http://jsfiddle.net/bX6Uk/.
$('#button').click(function() {
$('#div').animate({
top: 300,
left: 10,
}, 'slow');
});

To achieve the specific effect on your example page you should check out the jQuery UI Transfer effect.

jQuery Quicksand + Captify (Rollover Script)

so I have a little issue with my jQuery Captify (Caption on image rollovers) and Quicksand (Image filtering system) not working so well together. When the page loads, my Captify works well when I roll my mouse over the images, however as soon as I click a link to filter my thumbnails, the captify script stops working.
I tried to call the captify script every x seconds, but I'm either not doing it correctly or it's just not the right solution. Can anyone help me out? The site can be found at http://www.galaxyturbo.net/new/index.php
If you have Firebug or similar developer tools like in Google Chrome, you can take a look at my code from there, I just didn't want to perhaps spam this page. Thanks SO much in advance if you can help me out here, I'm really desperate.

Well, I would say we both need to learn more JavaScript, but I had the same problem, and here is how you make it work :
What you need to do is RECALL THE CAPTIFY FUNCTION AFTER THE QUICKSAND CLONNING !
so look for the JS code for quicksand, look for :
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
return false;
that should look like this :
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
},
// RECALL CAPTIFY ===============================
function() { $('img.captify').captify({
speedOver: 'fast',
speedOut: 'normal',
hideDelay: 500,
animation: 'slide',
prefix: '',
opacity: '0.7',
className: 'caption-bottom',
position: 'bottom',
spanWidth: '100%'
});
}
// RECALL CAPTIFY ==============================
);
return false;
hope that helps !
also, you will have to do the same with other scripts, like LightBox or PrettyPhoto .

fadeIn and Out effect on hover with jQuery

I'm currently using a hover effect using jQueryUI like this:
$('#menu-header-menu li a').hover(
function() {
$(this).animate({ backgroundColor: '#eaeaea'}, 500);
},
function() {
$(this).animate({ backgroundColor: '#fff'}, 500);
}
);
But I feel that including both jQuery and jQueryUI libraries to accomplish this isn't necessary. Is there any smart way to do this using fadeIn and fadeOut with only jQuery?
I've tried some various things but can't make it work without jQueryUI.
Thanks / Tobias

In order to perform animations with colors, you will need to use the jQuery Color Animations Plugin or a bare-bones fx package from jQuery UI.

Alternatively, you can animate to a class with this plugin: http://plugins.jquery.com/project/animate-to-class