General issue - if I hover on the links too fast, the element that should of faded out does not and stays on the page.
For this widget, I am creating a rotator. Normally it displays element set A, it just fades out the current div and fades in the next. This all works fine. A second component is some links which when I hover on them, it will stop the rotator and display an element from set B. when i hover off the link, it will have a deplay (i used setTimeout) of maybe 3-4 seconds then resumes the rotator to show element A items.
I have this working as long as I hover over the links at slow speed but when i hover and switch from one link to another at high speed, then i get some divs from element B staying on the page.
I don't have the code with me because it is at work but has anyone seen a similar issue? how can I fix this? I worked on this for a whole day
I think this has something to do with while fading I call the fade again stopping the fade out being called or something like that. but i have tried to put a condition to say if the timeout is still in process, clear the timeout and fade out. I might of coded something wrong but in general has anyone seen this kind of problem?
Related
I hope the title is not misleading, but have this situation:
I want to to make that gif appears only if class exists. Now, I have three gifs, and I want each one to start its animation after the previous ends. How do I do this correctly?
I also want the first animation to start only when page is scrolled to its div, not before, as there is no point of showing the gif until the page is scrolled to its section.
I did try something, but it is not working..
if ($('.title-inner').hasClass('visible')) {
$('.media').find("img[src$='/04/IC.gif']").show('2000');
}
What is the best approach to this?
I'm polishing up one of my websites, and I would like to add in an effect to all the images on my page so they all fade in when the user scrolls down to each respective image.
I've seen several posts concerning this effect, but they all deal with only fading in one particular image.
Is there a way to have ALL the images on a page fade in when the user scrolls down to each one?
I've got quite a few images on this page, but I didn't want to have to go into each one and copy/paste the code to add the effect to each image individually if I can get away with it.
Bonus points for anyone who could also help me figure out how to reverse the effect when the user scrolls up.
This way, if the user scrolls back to the top (or another section of the page) all the images that have already faded in all fade back out once they are completely out of view.
This way, if the user decides to scroll back down, they get the same image fade in effect each time they scroll through the page.
Any help on this issue would be greatly appreciated. Thank you!
You could check on the scroll event if the offset of a image is reached, and them show the image, on the contrary you can make it work for hidding ;)
You're looking for something like Wow.js. It is very easy to implement.
http://mynameismatthieu.com/WOW/
Last night I was wondering how it is possible to delay a fadeIn or something similar. It's not something I'm working on, I was just wondering.
If you have a list, with links that activates a tooltip on hover, for example. How do you make it "wait" until you have hovered for 1 second?
I want to do this, so the tool tips doesn't "flicker" when you hover along the list. If you understand what I mean.
The same thing could be used at logins. If you see http://twitter.com/ (not logged in). If the login box in the top, was activated with hover, and not click, it would disappear again if your cursor left the login box. Is it possible to set a "delay" so your cursor could leave the login box, and come back, without it disappearing...?
In short:
- How do you activate a script, when hover after x seconds?
- How do you set a delay for hiding a div (when not hovering) that was activated by hover?
- Is it the same thing, just in reverse?
There is a quite advanced hover plugin that waits for your mouse to slow down before triggering arbitrary code - http://cherne.net/brian/resources/jquery.hoverIntent.html
Alternatively, if you don't need something so advanced... you can simply trigger the animation in a setTimeout(), and on mouseleave call clearTimeout()
Yet another alternative, is to not bother with the delay. If you do a .stop().fadeIn() and a .stop().fadeOut() rather than a simple show() and hide(), you won't get a "flicker" and the effect will look quite nice.
(You can look at .delay() for delaying animation-related code - although this will only delay the animation, even if you move off the div before the delay finishes.)
I'm trying to recreate an effect in jQuery, where an element (<li> <img>) will be cycled and has a fading effect when hovered. The '<li>' contains '<img>' (image screenshots). When the mouse is on top of element it will keep cycling all that are in '<ul>' with a fading effect. When the mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list.
My Existing Code:
link text
My Problem: the current code has some problem with the pagination, it added all images that can be seen on the code. Instead of 1-8 only, it continued to add another 1-8 and another.
Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element.
I don't know if the 'Cycle Plugin' (Plugin Home Page) is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem.
Thanks and merry xmas!
Edits
remove and added a link
I could be wrong, I'm not familiar with this plugin, but it seems like you need an ID for each slideshow you have instead of using a class like you are.
I've setup a JSFiddle with your code and tweaked it. Below is how each slide should function.
starts on mouse over and stop on mouse out
changes on mouseover of the nav
changes when the nav is clicked
The link I gave you in the comments to your question should guide you to the available options for this plug-in. In case you missed it, here it is: plugin options
Ive been fiddling with this for hours and hours and just cant get it right. First off my sites are already using Prototytpe and Scriptaculous, and to change would take a long time.
Basically I am after achieving a slideshow effect similar to jQuery Cycle plugin. I have written most of it but cant get over this hurdle:
I need the user to be able to press a control button which will skip the slide to which ever one they have picked. My problem is that if a fade / appear effect is running, then it causes an overlap.
I am using queues and they are in their own scope. The problem as I see it is that the fade effect on one slide and the appear effect on the next slide are separate functions. Which means that if the user clicks the control button to move to another slide whilst the animation is inbetween fade & appear, then the next cycle will slot itself in the queue between those 2 effects. The default is to append to the end of the existing queue, which should be fine. But if the appear hasnt been added when a new fade is instantiated, then the queue messes up.
I can make it so nothing happens if animation is in effect but thats not the effect I am after. I want to be able to click a slide and whatever is happening to effectively stop and the next slide appear.
This is an example of what I am after: http://www.zendesk.com/
Im sorry if that doesnt make sense. Its a tough one to explain.
If you don't find anything by the lib you can just use the DOM and some JS like in this question: How do you make something to appear slowly on a page using Javascript?
I managed to fix my own problem last night.
I had already tried this but couldn't get it to work right. All I done was added a flag variable which is true if any animation is running (var running = true; [or false])
If the user clicks the pager buttons to move the slide (lets say from slide 1 to slide 4), and if the slide is already in motion (then var running == true), then the code finds all queued effects in the system, deletes them, and then hides all the slides. It then just starts a new cycle to slide 4, as the user requested.
Doesn't matter how fast you click the pager buttons now, it works seamlessly. :)