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
Related
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.
I want to slideUp() a div, and when its sliding up, I want to move it down by animate() - in the exact same time .
what I have done so far :
ln = jQuery("Selector");
ln.slideUp(1500, function() {
ln.animate({top: '150px'}, 'slow');
var Html = jQuery('#last' + id1).html() + jQuery('#last' + id2).html();
ln.html(Html);
});
But it slides up first, and then moves down 150px.
I want to call these two functions (slideUp and animate ) in the exact same time, I want to know is it possible or not?
Or does my problem have an easier way to solve ?
P.S : I think this kind of questions has been asked before, like this, but Its not my answer if you read it completely.
You can do this by using .animate() for both operations and just specifying both changes with properties that you pass to animate. The slideup can be done by specifying a final height of 0 for animate. Using this single animation, jQuery will run both changes together as part of the same animation sequence.
ln.animate({top: '150px', height: 0}, 'slow');
Working demo: http://jsfiddle.net/jfriend00/kKsa4/
I'm having slight troubles with the jQuery Waypoint plugin, and any information/help is appreciated.
Ok, so to define what I want to do: I have images, that are hidden prior to being in the view area. I want them to do an animation effect once in the view area. That is the final result, for now, I'm still in testing as I am generally new to jQuery but getting better.
So I started out doing the shake on a single div, and it worked great once the once it was in view. I used the following code:
HTML:
<div class="shown">Shake it</div>
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).effect("shake");
}, { offset: '95%', triggerOnce: true });
});
Then I made two instances of the class='shown' in my HTML (one at top, and one at the bottom), and when I scrolled to them, they both worked great. Plus, they both worked at separate times, which is what I'm trying to gain.
Here's the trouble
When I tried to 'display:none' and then animate to show on scroll, it animates BOTH, instead of just the single at a time.
This is what I'm using
HTML
<div class="shown" style="display: none;">
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).fadeIn( 10000, function() {
// Animation complete
});
}, { offset: '95%', triggerOnce: true });
});
Ok, so just to clarify one more time :D (to be safe)
I want to be able to use the same class for MULTIPLE instances, that will only display once THAT element is in view. Right now it's displaying ALL elements once 1 instance is in view.
Again, any information/help is appreciated. You guys have a great community here, I'm glad I could join!
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.
I have a web page with animations (JQuery Animation) all over the place. A typical animation sequence may contain three or four objects animating independently at the same time. The issue I am facing is that the queuing of the animations is not predictable. Some of the animations are running simultaneously while some others are not.
I am doing something like
setTimeout(function(){
//animations
}, delay);
in many places just to try and group the animations. Even when using this, some of the animations inside the code block are not running simultaneously.
Is there any way to force animations to be run at the same time? Is there a way to fill up the queue with animations and then execute these at the same time?
Is there any comprehensive documentation of how this thing actually works?
EDIT: Sample code Warning: The code is messy
The question is looking at the code how do you know which of the animations are going to run simultaneously?
This run simultaneously (but not if there's already an ongoing animation on the object):
$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800);
And if you want to be 100% sure that it's animated right away (notice the queue:false):
$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800});
You can also do this. (It will still run simultaneously)
$('.blabla .1')
.animate({fontSize: 20},{queue:false,duration:800})
.animate({opacity: 0.4},{queue:false,duration:800});
This runs one after the other.
$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800);
So does this
$('.blabla .2').animate({opacity: 0.3}, 800, function() {
$('.blabla .3').animate({opacity: 0.3}, 800);
});
I hope that answers your question.
Sorry for all the edits, i'm new here.
Use the step option. You give it a function, and after each step of the current animation, it will execute that function. Thus you can animate there. Link to docs.