Animate/Slow down elements filling space left by removed element - javascript

Here is my example: http://jsfiddle.net/MT5xS/
When you click the first picture, it is removed and all the following images move back to fill the space left by it. But they move too fast and you don't even get the notion that they moved.
My question is, how do I make these elements move smoothly? Basically like an iPhone when you move or delete an icon, like this http://youtu.be/-r7K4LTbI4A?t=27s
I'm not worried about IE6/7/8 or any other compatibility issues.

The most common solution I know off is to animate hide(), then in the callback function remove your image.
$('.user-pic').live('click', function() {
var $item = $(this).closest('li');
$item.hide('slow', function(){ $item.remove(); });
});​
DEMO - Animate element removal

Take a look at this jQuery plugin: http://razorjack.net/quicksand/
It does what I think you are describing. You could use it or take a look under the covers to see how its being done. I believe they're using position: absolute on all the grid items.

Another option is to fadeTo 0, animate() the image width to 0, then remove().
http://jsfiddle.net/MT5xS/2/

Instead of removing the element on click, you want to fade the target element out and then remove the element. Note this cannot be accomplished by chaining remove after the desired animation.
If you chose to rely on old school setTimeout() you have to remember about correct variable scoping. Alternatively you could add a callback to be executed upon animation completion:
var $el = $(this).closest('li'); //no need to operate directly on img imo
$el.animate({
opacity: 0 //plus any other animation you want... height:0, width:0, ...
}, 1000, function() {
$el.remove();
});
Fiddled

I think what you want is to...
$(element).css("visibility", "hidden");
$(element).animate({"width": 0}, "slow", function() {
$(this).remove();
});
Here is the fiddle http://jsfiddle.net/MT5xS/4/

Try this it will slide up and then remove
$('.user-pic').live('click', function() {
$(this).closest('li').slideUp('slow', function() {
$(this).remove();
});
});​

Related

Velocity.js - Buggy looping animation?

I have been testing a theory design for an animated mouse to indicate that the user of a website can scroll downwards. It's not complicated, and I've come up with a design which should be re-usable...
However for some reason if I try to clone the element and append it, it no longer get animated visually? However if I $.click() with jQuery, it fixes after one iteration.
Perhaps this is just a browser render issue? Please let me know if you cannot replicate the problem! Cheers
jsfiddle: https://jsfiddle.net/xw39e0bs/4/
Turns out that velocity calculates the start point based on current CSS values. So if you clone a moving element mid-motion, that will become the new start point. Therefore, one way to fix this is to provide forcefeeding.
Working example:
function mouse(){
$(".mouse .ball").velocity({
top: ["45%","25%"] //[TARGET_VAL,START_VAL]
},{
duration: 800,
easing: "swing",
}).velocity("reverse",{
delay: 2000,
complete: function(){
mouse();
}
});
}
mouse();
$("#clone").click(function(){
$(".mouse").last().clone().appendTo("#mice");
});
https://jsfiddle.net/xw39e0bs/5/
In this version we're reassigning the selector to bring in the cloned items. All of the clones then animate as expected.
complete: function(){
sel = $(".mouse .ball");
mouse();
}

Javascript move div onClick

I'm trying to get a div #sidebar that rests above my main #stream div to move from position left: 565px; to position left: 0px; onClick of one image in the #sidebar div (the red arrow in the images below), and do the reverse onClick of the same image. I know I have to use JavaScript, but I have no idea what the code would be. If possible, I would like to animate the div move too.
The pre-clicked state (the arrow will be my link):
The post-clicked state:
Thanks in advance!
If you want to animate it using animate have a look at this. It should get you pointed in the right direction:
http://jsfiddle.net/3DpfJ/5/embedded/result/ - Full screen result
http://jsfiddle.net/3DpfJ/5/ - source code
So what I simply did was this:
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
This is probably the simplest way of doing it via animation. Duration is set to 400 so it will take 0.4 seconds to animate. Adjust as you please.
This script should be executed as soon as you load the page to ensure that the expand works. You will want to create <script type="text/javascript"></script> tag in the header and put the code there.
Hope it works for you.
$('#sidebar').click(function(){
$(this).animate({"left": "0"});
});
jquery uses toggle to handle this. It works better than a regular "animate" because it combines the hide and show into one function (toggle).
You might need to do some tweaking to fit your needs but this should get you started:http://jqueryui.com/toggle/

Change CSS3 Background image on <p> hover

I'm trying to make the background image (that I set using the CSS3 "background" and "background-size") change when I hover over a certain paragraph.
I've tried:
in jQuery
$(function () {
$('#web').hover(function () {
$(this).css('background', '#000 url(space-image.png) center center fixed no-repeat');
})
});
in Javascript
onMouseOver="document.getElementByName("body").style.backgroundColor = 'red';
and others with no luck.
First,
$(function(){
$('#web').hover( function(){
$(this).css('background', '#000 url(space-image.png) center center fixed no-repeat');
}); // <-- you missed this, meaning 'end of hover function'
});
Also,
onMouseOver="document.getElementByName('body').style.backgroundColor = 'red';
Currently, the browser will think the onmouseover function stops at the " before body. The browser will set everything between " and the second " to onmouseover. So that's:
document.getElementByName(
which doesn't quite work obviously. You'd need to change the first and last " into a '. That way, the browser will take everything between the 's as the onmouseover value which works.
Have you considered doing this entirely with CSS3 pseudo-classes? In other words:
#web:hover {
background: #000 url(space-image.png) center center fixed no-repeat;
}
EDIT:
Do you want to change the background image of the entire page or just a single element? If it's the entire page, then you'll want to substitute $('body') for $(this), since $(this) is just referring to the #web element that you're selecting in the previous line.
This works: http://jsfiddle.net/gilly3/aBCqQ/
$(function(){
$("div").hover(function(){
$(this).css({backgroundImage: "url(http://farm2.static.flickr.com/1234/1324629526_1020726ce3_m.jpg)"});
},function(){
$(this).css({backgroundImage: ""});
});
});
Some observations with your non-jQuery code:
What does onMouseOver refer to? Are you assigning that string to a variable? The onmouseover property of an element must be in all lower case.
You have to escape quotes in your string with \. So ...("body")... becomes ...(\"body\")....
There is no getElementByName method. There's a getElementsByName (plural), but did you really give an element a name attribute of "body"? You can get the body element simply by: document.body.
Why use a string, you should use a function:
myElement.onmouseover = function() {
document.body.style.backgroundColor = "red";
};
$("p").hover(function() {
$("p").css("background-color", "yellow");
}, function() {
$("p").css("font-size", "25px");
});
above example contain how to change the background-color and font-size using hover.

Callbacks not working properly

I'm at a loss. In this code, #options should wind up fading in, but it doesn't. The CSS attributes are set, though.
$("#content > p").animate({ opacity: '0' }, function() {
$(this).css("display", "none");
$("#options").css("opacity", "0").show(0, function() {
$("#options").fadeIn();
});
});
The opacity is still being set as 0.
You can change the fadeIn() to...
$("#options").animate({ opacity: 1}, 500);
jsFiddle.
Seems like it should work, but apparently you'd need to use the fadeTo()[docs] method instead of the fadeIn()[docs] method.
$('img').css("opacity", 0).show(0,function() {
$(this).fadeTo(400, 1);
});
Although the show(0,func.. seems kinda pointless here, when you could just do:
$('img').css("opacity", 0).show().fadeTo(400, 1);
...unless the 0 you're giving for the .show() duration is actually a variable that may reference a larger number.
You can simplify your code a lot - remember setting opacity to 0 will replicate the visibility:hidden CSS attribute, whereas fadeOut() will replicate the display:none CSS attribute. The one critical difference between these two is that the latter will remove the element from rendered DOM so it will not take up space on the screen and the surrounding nodes won't even know it's there. The former will create a big empty box where the element still is but you just can't see it. Assuming you want to use the latter which is the most common, this should work:
$('#content > p').fadeOut('slow', function() {
$('#options').fadeIn();
});

jQuery - Fading animation on hover

I have a little jQuery animation which fades in a link when hovering an :
$(function() {
$('.delete').hide();
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').fadeIn('fast');
}, function() {
$(this).parents('li').children('.delete').fadeOut('fast');
});
});
But if I quickly move my mouse in and out of the image, the new animation is always added to the queue and when I stop I can see the link pulsating for a while. I tried using .stop(true), but then sometimes the fade in effect doesn't work at all (or just up to some opacity value less than 1). What can I do?
Thanks, Eric
The best way is to use hoverIntent plugin. This deals with the issues above. It also adds a slight delay to the animation so if a user happens to quickly move the mouse over all the links you do not get an ugly animation flow of all the links.
One way to prevent such problems occuring is to use stop() in conjunction with fadeTo(), as in the snippet below:
$(function() {
$('.delete').fadeTo(0, 0);
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
}, function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
});
});
Hope this solves your issue!

Categories