Hi to everyone this is my first ask on stackoverflow
I've created a simple code to manage a menu. Here is the code.
http://jsfiddle.net/corvallo/97x89/5/
If I click on "gestione news" all the menu elements will slide left with different delay
and an image (that on jsfiddle u can't see) with the text "Articoli" will appear.
So i click on the image and the text "articoli" will fadeOut and the menu elements will reappear with delay in the same position as before.
So the problem is that if I try for 4-5 times the first animation(that is the sliding left of the menu elements) will slowdown, and if I try again animation will be slower and slower.
I don't that the problem is in the delay() functions but in the $.each(), maybe I'm wrong.
Can someone help me with this.
Thank you in advance.
The animations seem to somewhat be still running for a while after they have apparently done their job. Use the following to see when they stop in Firebug or Chrome:
$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");});
I am not sure why they are still running, but you can stop them before running new animations like this:
$(this).stop().animate({"marginLeft":"0px"},"slow");
This seems to fix the slowdown issues that you are experiencing.
Put your menu in a div. Instead of doing a foreach on each element, animate the main div.
Delay should not be causing your issue as all that does is wait to begin the animation timing, but having that many animations going at once is starting several internal timers instead of just one, which could lead to hiccups.
Related
I'm experiencing a very weird chrome (45 and 46 windows only) behaviour with css3 transition using fullpage.js
The transition "freeze" 80% of the time when I'm going from the first to the second section of a website. And then, everything work fine.
Take a look by yourself :
first you will need to login as the website is still under construction.
Http://www.evandorlot.com/wp-login
Login : Guest
Pass: Luckyone
then, come back to the home page www.evandorlot.com
Sroll down, here's the bug. From the first to the second slide of the website, the transitions "freeze" they pop instantly to their final stage.
After pressing ctrl+f5 and trying again, sometime it work, sometime no... it seams to be a chrome bug as it work 20% of the time. But I would like to fix it somehow. For this I need to know what cause the issue.
I'm working on this bug for more than a week now and don't find any solutions:
I tried to disable all the TweenMax animations, then all the css3 animations that are not vital. I also disabled all my custom javascript expet fullpage.js function without any configuration, I tried removing the image from the second slide, deleting the second slide, swapping the second slide with another, replacing the image, the text, deleting the diamond icon, deleting the menu on the bottom right corner, actiavating GPU acceleration by adding CSS3 translateZ to each elements that is animated on the first and second slide... Nothing fixed the bug.
The only way to make it working properly is to empty ALL the content from the second slide and leave the entire section empty. So I guess something cause the issue, but I really don't know what.
I know it's a long shot but if anyone has already experienced similar bug or has a suggestion to fix it. It will be very useful as I'm totally desperate :)
Having a problem getting my javascript working properly . For a single tooltip, it works great. But when I rollover multiple tips, I get a flickering effect. It seems the mouseover, out events are being 'queued' or something.
I've created a fiddle where you can see what I'm talking about
http://jsfiddle.net/eco_bach/dpFBQ/2/
Any other optimization suggestions appreciated!
You just need to add .stop(true, true) before the fadeIn() or fadeOut() methods to end any current animation. This will stop it flickering as seen here
Your code is creating and animating the tool tip every time you mouse over an element, so the flickering is expecting. I suspect you want to open it once and then just update its location and content when hovering others.
In that case you will need to track wether the tooltip is already open or not, if it is update its content and location but skip animating it. If not, do do the animation.
I've got a page with ajax links between pages, and I'm having some problems with the transition. I set up a demo page on jsfiddle to demonstrate.
http://jsfiddle.net/UVr4A/
The problem is, when the content changes height, the div will end up in the wrong position and cause a non-smooth transition. I tried a couple things to try and fix this. My current solution is to remove the animate property from the div and then move it, but this doesn't always work. In my code I commented the delay to demonstrate the issue. Even with a 50ms delay it doesn't ways work properly (I think it's due to browser lag since it barely ever happens on this jsfiddle), so I'm looking for more elegant solution that doesn't cause the transition to take any longer.
I'm using css3 transitions rather than jquery because they tend to be much smoother.
I think the issue was the css transition. Check this out:
http://jsfiddle.net/UVr4A/2/
Well, it turns out the problem had nothing to do with what I thought it was.
Part of it was that I over-simplified my question and ended up removing the problem.
On my long page there are images that end up loading mid-transition, which is what was causing the jumping. I fixed this with an onload events and a timeout.
http://spacedout.co.uk/spaced_out_architects_architecture_portfolio
The slider transitions fine until it gets to slide 20 to 21 and above increments when for no apparent reason it seems to slide through all the slides again. It still ends up on the correct slide however.
Does anyone have any idea why it would be doing this?
It uses the (wordpress) wp-coda-slider plugin, I just can't work out why it does this after 20 slides. I've tried using different transitions and time intervals and it makes no difference. Has anyone had this problem before or know where to look to try to find out why it's doing this?
Much thanks
Dom
It slides all the images, but when the slider runs out of images, the next transition returns you to the first image, but with the same transition time as the ordinary image sliding.
You might want to try something like this: Infinite Carousel
Can anyone help me with this simple bit of jQuery? I am building a carousel that features many sliding <li>s. Each one has a short description accompanying it, which I want to fade out when the carousel slides, and fade in when the carousel stops at another <li>. The problem is that when the carousel controls are clicked rapidly, the fades take a while to catch up. Also the current simple fadeIn/Out option doesn't work well when clicking to an <li> much further through the carousel (from the small grey discs underneath infographic). I've tried a few options but I'm not really getting anywhere.
The page is here: http://weaver-wp.weavertest.com/radiation-infographic/
Thanks for any help :)
David
The trick is to stop the operation before you start the next one:
http://api.jquery.com/stop/
bottom line, you stop all previous animations before you call in the next one. This avoids building up a queue of animations.
Use clearQueue before calling fadeIn/fadeOut