element animation - javascript

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.

Related

Hard Javascript/jQuery Animation (Spinner/Scroller)

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.

Properly animate multiple elements with Jquery

Probably I didn't choose the best title for my question, sorry for that.
I'm pretty new with jQuery, hence with animations.
I'm just experimenting with It, but now I have a problem.
The script works like I want, but It seems a bit "buggy", I bet my code isn't optimized, at all... Plus I may be using a wrong way to achieve what I want.
One button is triggering the script (Its not supposed to be like that at the end, but momentarily I'm using this button to trigger the script), it works like a "toggle" and every time I click on "Show", a bunch of HTML is shown and two animations run:
$(".achievement_container").hide(300).show(); //shows the whole container
$(".glow").fadeIn(100).fadeOut(800); // First "brightening" effect
This one shows the whole "frame", while another animation runs for a lighting effect:
$(".ach_hover").css("left", "0px").css("opacity", "1").animate({
left: "252px",
opacity: "0"
}, 1100);
You can see a "working" example here:
http://jsfiddle.net/Frondor/6EA6W/
My problem appear after I click the "Show" button many times, the $(".ach_hover") animation start to fail and it doesn't appear, at all...
I'm not satisfied with the way I wrote this last animation, at least I think there might be a better and "standard" way to achieve this.
So I would really appreciate any suggestion from jQuery experts to "optimize" my script, and avoid any buggy behavior on it.
Thanks in advance
Try using jQuery .stop()
Stop the currently-running animation on the matched elements.
$(".ach_hover")
.css({
"left": "0px",
"opacity": "1"
})
.stop()
.animate({
left: "252px",
opacity: "0"
}, 1100);
Fiddle

jQuery sliding function

I have a working jQuery sliding function that I have posted here below. I got it from another question on this site. It's great. Except I now want it to go the opposite direction.
I used this to slide from left to right. I tried adding a minus sign (-) in the animate function to make it {'-width': 'toggle'} but that just made it toggle on and off instead of sliding. I'm sure it's something simple, I'm just frustrated with it.
JS
$(document).ready(function(){
$('.pull-me').click(function(){
$('.panel p').css({
'width': $('.panel p').width(),
'height': $('.panel p').height()
});
$('.panel').animate({'width': 'toggle'});
});
});
And the html
html
<div class="panel">
<p id="novelDescrip">A website for a local musician to market, stream, and distribute music and merchandise. Content design and development</p>
</div>
</div>
<p class="slide"><div class="pull-me">Slide Out!</div></p>
When I click the More info tab, I want that panel to slide out to the left. Then if they click the More info tab again, it should close back up to the right into the more info tab.
Is there not a way to just reverse the direction of the function i'm already using?
Try this:
http://jsfiddle.net/FL87t/3/
$(document).ready(function(){
$('.pull-me').click(function(){
if ($('.panel').is(":hidden"))
{
$('.panel').show('slide', { direction : 'left'}, 500);
}
else
{
$('.panel').hide('slide', { direction : 'right'}, 500);
}
});
});
This should help you:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
Read through it and you should find what your looking for.
Bare in mind that JQuery also has: .slideDown() & .slideUp()
But for changing the animation itself you're probably going to need CSS.
This goes in the opposite direction and sort of matches what you want to do in the image you just posted, try building off of it: JSFiddle

Show an element at the bottom of the page with javascript

In a guestbook I have a button at the bottom of the page which displays the input form on click:
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
});
The problem is that the appearing form is outside the current view port and only manual scrolling makes the form visible to the user. I couldn't find any solution from the web but this must be a very common issue. Isn't there a jquery command to "stick to bottom" or similar?
Next thing is: I use nanoScroller on the whole page, so normal downscrolling methods won't work here. nanoScroller has a method scroll:"bottom" but it isn't smooth...
Thank you very much,
Toni
You can easially scroll to the bottom of the page whenever your webpage expands :
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
$('html, body').animate({
scrollTop:$(document).height()
}, 'slow');
});
you can set the 'slow' of the .animate() to any speed in miliseconds.
jsFiddle
Just ajust the scrolling within your function
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
/* $(scroll magically to #post) */
$("div#post").nanoScroller({ scroll: 'top' });
});
You may wish to use css to solve this problem if you aren't concerned with the post item covering other elements:
div#post {
position: fixed;
bottom: 0px;
}

Complete function before starting next (fadeIn/fadeOut)

UPDATED (see notes at bottom)
I have created an image map and when you hover over a specific section of this image map a description will appear in a designated area (the sidebar) of my website.
Each description is of varying length therefore I have not set any maximum height level for my sidebar area so that the display can grow vertically to accomodate each description.
The problem I am having is that when you rapidly hover over areas of the image map the display produces some weird results; showing blocks up content from another hot spot for a split second in full beneath the newly hovered over area and corresponding description (hope that makes sense)
Is there anyway to complete one function in full before displaying the next to avoid this nasty display/animation?
Here is my code:
$(document).ready(function() {
$("#a-hover").hide();
$("#a").hover(function() {
$("#a-hover").fadeIn();
}).mouseleave(function() {
$("#a-hover").fadeOut();
});
$("#b-hover").hide();
$("#b").hover(function() {
$("#b-hover").fadeIn();
}).mouseleave(function() {
$("#b-hover").fadeOut();
});
$("#c-hover").hide();
$("#c").hover(function() {
$("#c-hover").fadeIn();
}).mouseleave(function() {
$("#c-hover").fadeOut();
});
And my CSS;
#a-hover,#b-hover,#c-hover {
z-index: 2;
float: left;
position: relative;
}
#a-hover,#b-hover,#c-hover,{
position: relative;
top: 0px;
left: 0px;
z-index: 1;
width:326px;
min-height:603px;
background-color:#dedddd;
}
I have shortened my code for readability (I have 9 image map hot spots)
I am a novice when it comes to jQuery but I am making a committment to learn so please go easy as my code may not be up to scratch!
I have tried to solve this myself before posting here, but I am out of my depth and need some expert advice
I appreciate any responses.
Thank You,
Wp.
UPDTAE: I tried the majority of what was provided here as answers and whilst I believe these answers are on the right track I couldn't get the problem to stop however I did notice improvement in the animations overall.
I ended up using a combination .stop(true,true); and **resize font automatically.
**Ultimately not getting the desired result is due to my lack of polish with jQuery but being in a rush I managed to find another way to handle this issue (auto resizable font).****
Thanks to all who took the time out to answer and for those reading this for a similar solution at least know the .stop(true,true); properties did in fact work for me to solve one part of this problem.
Try adding .stop before each fadeIn and fadeOut. You should pass true, true to stop to complete the animating instantly rather than leave it half faded in:
$("#a").hover(function() {
$("#a-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
$("#a-hover").stop(true, true).fadeOut();
});
You can also get rid of all of the repetition by binding on a class instead of id's:
$(".imageMapElement").hover(function() {
$("#" + $(this).attr("id") + "-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
$("#" + $(this).attr("id") + "-hover").stop(true, true).fadeOut();
});
May be you can try Jquery Hover Intent plugin.
try stopping the other functions:
$("#a").hover(function() {
$("#b-hover").stop().hide();
$("#c-hover").stop().hide();
$("#a-hover").fadeIn();
}).mouseleave(function() {
$("#a-hover").fadeOut();
});
Try adding .stop() before each .fadeIn and .fadeOut -- that will cancel any previous animations and immediately begin your new one.
You also have a problem with using .hover() -- that actually encapsulates two actions, mouseover and mouseout. When you assign two functions to it, the first is mouseover and the second is mouseout, but when you assign only one function to it, that one function is used for both mouseover and mouseout. So, in effect, your code is causing the element to fadeIn and fadeOut on mouseout.
Incidentally, you can shorten your code a lot using standard jQuery techniques:
$("#a-hover,#b-hover,#c-hover").hide().hover(function() {
$(this).stop().fadeIn();
}, function() {
$(this).stop().fadeOut();
});
...or even better yet, assign a class to each of those three IDs and select it instead.
You have to chain all the jQuery function calls!

Categories

Resources