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
Related
I almost have no experience with JAVASCRIPT, so I've searched a lot for a carousel with right & left arrows & lightbox (fancybox). & finally I found it ... but when I click left or right arrow , the all images row slide left or right. I need it to slide normally one image by one. How can I modify that, please ?
Here is an image describe how the carousel look
I already done with copying the carousel to my website, but the only issue is that the all images row slide left & right ... so when the user click left, the current four images got replaced with the next four images.
it's hard to write all needed codes here, I think the others Javascript files make effect on the final result. So, I attached all the needed files.Website's Files
First, I recommend you practice implementing the carousel following this instruction (be sure that you incorporate Bootstrap 4 accordingly).
https://v4-alpha.getbootstrap.com/components/carousel/#with-controls
My experience with carousel is that you would have to nest <div> deep in each image to control their placement and sliding. I had to create container per image for my carousel, so that was at least three levels deep. If you only use images alone per slide, you may be able to just use div containers alone.
Now, if you are using LightBox framework as well, then there are likely to be conflicting javascript functions. My suggestion is that if you really want the carousel, to just use images alone, and then style it accordingly by CSS scripts and not use the Lightbox. Otherwise, it is going deep in javascript and make custom adjustments.
https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
se angle brackets to force linking: Have you seen https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
enter code here
Does anyone know a jQuery slider that has solid callback support, and can allow me to add a slide to the beginning of a slideshow while a user is on the page without disrupting the slide the user is on? wootheme's flexslider has addSlide() but it handles this very poorly if you try to add something to the beginning (position 0) Swiper http://www.idangero.us/sliders/swiper/ has a prepend() function, but as you can see in their demo, whenever you prepend it jumps the current slide to the one before.
I need to add content to the beginning of a slider with touch functionality like these two, but I need that to be invisibly added without messing up or jumping around the current slider position. Can anyone suggest one that they like? Obviously I prefer one that is free and allows me to use multiple places like a Creative Commons license.
For slideshows, I really recommend jQuery cycle plugin.
http://jquery.malsup.com/cycle/
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.
I'm trying to create a slideshow using jQuery (similar to jquery scrollhorz) but I want the previous and next image partly shown.
Right now, what I have, is a div (with overflow hidden) containing all the images I have. When previous or next button is pressed, I animate the whole div either to left or right. The problem is, if I have many images loaded into the div, it becomes laggy and slow.
What is the best design to implement this image slider?
Without going into the code required, my suggestion would be to use jquery (or moo if that's your thing) to maintain a div that is three to five images long, and keep a list of urls to all the images you want displayed. When you slide the images left or right, you'll pop off the image on the opposite end and add the appropriate image to the other side.
You could use the same technique to loop through the list seamlessly.
Try this.
Hero carousel
It fits your description....Hope it helps out :)
this might be a solution too.
http://jsfiddle.net/JCQ6Q/15/
Vote up if it helps you :) all the best
So, here is how the slideshow looks.
a[b]cde
In this example, b is the visible part of the slideshow. When b is visible, you can't see a,c,d, or e.
Is it possible that when b is showing, that you can see a preview, or overflow, of the right quarter of a and left quarter of c? These previews would essentially be next and previous buttons that have a translucent background.
I don't want for just the one active slide to show, I want to be able to see a left quarter of the before slide and right quarter of the after slide just before they come in or after they leave, respectively.
I don't know what part of the cycle plugin I need to rewrite or code in order to do this. Is it too hard or difficult to accomplish with the cycle plugin?
The cycle plugin gives numerous callbacks, such as before and after which can probably be used to to add the behavior you described. They are all outlined here: http://jquery.malsup.com/cycle/options.html
The before callback is called before a transition happens and is passed currSlideElement and nextSlideElement as parameters.
Using these parameters, you can get a reference to the image that will appear next, or has just appeared and do anything you wish with it. This may mean cloning it and displaying it next to the slideshow.
I'm confident that some combination of before and after callbacks will make this behavior possible.