How to show images and time them correctly? - javascript

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?

Related

I have an animation I want to have executed once it is showing

As the title says, the problem is that whenever the user begins scrolling, it animates. How can I fix it such that once the element is showing, the animation begins? Please note that the section where the animation is supposed to start is not the first thing you see once the page loads; it's down the page.

How to Make Every Image on a Page Fade In on Scroll

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/

jQuery div autoscroller solution

I need a jQuery scroller to scroll my divs with auto scrolling facility. I am looking for something like jCarousel.
But there are limitations for this. What I want is one which;
1. Scrolls <div>s (or some html elements) and not just images. I may have something like the picture below, to scroll.
It is a text and image combination.
2. It should auto scroll contents
3. The slider should MARQUE continuously and should not rewind to beginning. The slider should not rewind (in the opposite direction) to go for first image/content after the last image/content.
What jcarousel is doing is in autoscroll mode, it shows a set of of images/contents at a time, stop for a while, and then immediately displays the next set. I don't want this and want to autoscroll contents smoothly in a loop. That is, first content should come after last content, in circular loop.
I can provide additional details. just post comments.
Anybody got what I am trying to say and what I want and suggest me a solution?
You can do this without a plugin with some fairly simple jQuery.
See an example here that I put together for another answer:
http://jsfiddle.net/6Dxg6/
Basically, the idea is you clone the contents of a wrapper, and then continually move the contents to the right/left the width of the original content and then reset. Works with any content.
That code even includes hover-stop functionality. Without that, the code is simpler still:
http://jsfiddle.net/qJZtp/1/

javascript/jquery timing issue

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?

How can I run an appear effect and a fade effect in scriptaculous? I need them to run in tandam so that no other effect can slot inbetween

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. :)

Categories