$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").slideToggle("normal");
return false;
});
});
With this piece of jQuery code I can make elements slide in and out. But the problem is that when someone clicks real fast, the slide out will only go until the max height is reached of the latest reached height.
So, if someone would click real fast the element will only slide out a couple of pixels and slide back up. If they´d than click again to slide it out, it will only slide out to the max height it reached the last time.
Can anybody help me to fix this issue to make this work proper?
PS: The height of the p element is set to auto so it automaticly matches the height of the content inside (maybe this detail will help with your answer).
Instead of using the click function to attach the click event, use one instead:
$("ul li").one("click", doStuff);
function doStuff(){
// do your stuff here
$("ul li").one("click", doStuff); // Re-attach event
}
and then re-attach the event in the function.
Try this:
$(document).ready(function() {
$("ul li").click(function() {
if ( ! $(this).find('p:animated').length)
{
$(this).find("p").slideToggle("normal");
return false;
}
});
});
If you want to actually process the additional clicks (rather than ignore them), then you want to use .stop(true, true) to stop the previous animation and jump it to the conclusion so your next animation can run as you want:
$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").stop(true, true).slideToggle("normal");
return false;
});
});
Whenever you trigger an animation from a user click, you should know about .stop() and figure out which arguments you want to use with it for a given situation. Without it, the animations can pile up in the queue and run sequentially which is usually not what you want.
Here's the jQuery reference info on .stop() and it's arguments.
Related
I'm with a problem, and I need your help.
So, I'm trying to make a menu that show the content when you do a mouse hover in a li tag. And the first content need to be always showing when you do a mouse over on the first li option, or when no one li is hovered.
I tried to make this, and you can see a demo here: https://jsfiddle.net/sqftzuja/
As you can see, it's isn't work so fine and some times it show more than one content.
My script
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').click(function() {
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').hide();
$(section4).fadeIn(800);
});
});
If anyone can help me improve it it will help me a lot!
Thanks in advance!
jquery hover takes two arguments, one is for the pointer entering the element and the other is for when it leaves the element.
e.g.
$('selector').hover(one_function, two_function)
you can either use hover and call the second function or use the onmouseover event.
here's the fiddle for onmouseover https://jsfiddle.net/sqftzuja/1/
You code is correct. You just need to stop the running animation.
$(section4).stop( true, true ).fadeIn(800);
This will solve you problem in the old code.
you must stop fade in animation.when you fade in it effects after given interval.i updated fiddle as well
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').hover(function() {
//console.info( $(this).attr('href') );
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').stop().hide();
$(section4).fadeIn(800);
});
});
the fiddle so far:
jsfiddle.net/hYEzV/993/
So I'm looking for a button that can change to the next image or the preview image etc
Im not sure how to go about it tho...
I've created both previous and next button already in the fiddle they just need the function to change to the next or previous image.
Thanks to anyone who can help and explain
thank you.
edit: I'm looking for it to still autoplay like it is doing im just after the ability to flick through the images instead of waiting for the timer if the person didn't want to just sit and wait and watch. I also need the link button in the bottom right to be there as it is.
For the next button I was think this:
$("#Stage_Next_Div_Button").click(function(){
$(function(){
$("#container img").first().appendTo('#container').fadeOut(1000);
$("#container img").first().fadeIn(1000);
});
});
But No idea of how to do the Previous button...
http://jsfiddle.net/hYEzV/998/
I removed the timer and added the click events to the arrow elements.
The test() function was doing the next action correctly, I reverted the images for the prev() function.
The <a> elements are not relevant, you could get rid of them.
I'd not discuss why you decided to write your slider in that some weird way.
This is not the best method to do things like this, but yea... it works.
I sticked to your code and made two functions, next() and prev().
Just bind click event to your buttons and fire next() or prev() function.
$("#Stage_Next_Div_Button").click(function() {
next();
});
$("#Stage_Previous_Div_Button").click(function() {
prev();
});
function prev() {
$("#Link a").last().prependTo('#Link').fadeIn(1000);
$("#Link a").first().next().fadeOut(1000);
$("#container img").last().prependTo('#container').fadeIn(1000);
$("#container img").first().next().fadeOut(1000);
}
function next() {
$("#Link a").first().appendTo('#Link').fadeOut(1000);
$("#Link a").first().fadeIn(1000);
$("#container img").first().appendTo('#container').fadeOut(1000);
$("#container img").first().fadeIn(1000);
}
Updated fiddle: http://jsfiddle.net/hYEzV/995/
Docs:
click - http://jqapi.com/#p=click
prependTo - http://jqapi.com/#p=prependTo
appendTo - http://jqapi.com/#p=appendTo
So I have this problem. I have a page that has slides which doesn't slide by them self and i want that they'd slide. Here is the code http://jsfiddle.net/tUUPN/3/
$(document).ready(function () {
$("#slideshow").css("overflow", "hidden");
$("#slideshow-nav").css("visibility", "visible");
$("#slideshow-nav a[href=#farm1]").addClass("active");
$("#slideshow-nav").localScroll({
target: '#slideshow',
axis: 'x'
});
$("#slideshow-nav a").click(function () {
$("#slideshow-nav a").removeClass("active");
$(this).addClass("active");
});
});
EDIT
I updated jsfidde http://jsfiddle.net/tUUPN/10/ (included jquery files at External Resources tab on the left)
I would recommend using jQuery's Animate() method to produce a sliding effect. You can read up on the API and examples on that same page.
You can still apply your click functions and such, but you really need animate as a weapon of choice when moving / sliding objects.
Create a method to go to the next slide then call that method in setInterval. The number of milliseconds determines how often it fires. Use clearInterval if u want it to stop.
I don't know what am I doing wrong but nothing is correct.
Basically it works just fine but if I hover over another list item it starts animation and previous one remain.
Here's JS part...
$('nav#topMenu li').on('mouseenter mouseleave', function(e) {
if(e.type === 'mouseenter') {
$(this).append('<span class="active"></span>');
$('span.active').stop().slideDown('200');
} else {
$('span.active').stop().slideUp('200', function() {
$(this).remove();
});
}
});
Here's JS fiddle:
JS Fiddle redirect
Sorry for that ugly hover background color...
I have no ideas although what I am doing wrong... Appears to be everything wrong!
Any solution is appreciated. Thank you.
EDIT:
Appears that I am also appending that span on every single hover, even if it's already appended to the list item. Oh my ...
This is happening because both spans still have the class active. The mouseleave occurs first, but mouseenter triggers .stop().slideDown() on both spans.
There are several possible solutions, but I think one is to just use .removeClass('active') on the span (possibly adding another class with the same styles). This will cause it to slide all the way up while the true active span slides down:
http://jsfiddle.net/ExplosionPIlls/HL7Aj/1/
Check if the animation is completed with .is(":animated"). Since $('span.active') selects all the elements with the active class, you effectively stop the animation on all of them as you move your cursor across elements. You should apply further animation on those elements on the condition that they are not carrying out any existing animations.
See DEMO.
$(function () {
$('nav#topMenu li').on('mouseenter mouseleave', function(e) {
if(e.type === 'mouseenter') {
$(this).append('<span class="active"></span>');
$('span.active').each(function() {
if (!$(this).is(":animated")) {
$(this).stop().slideDown('200');
}
});
} else {
$('span.active').stop().slideUp('200', function() {
$(this).remove();
});
}
});
});
I suppose that replacing
$('span.active').stop()
with
$(this).find('span.active').stop()
may help you.
So, I essentially have what I want already, very simple, but there are some bugs. I just want so when you hover over an image, two left/right buttons appear on the image that allow you to click through other images. Then when you leave the image area (excluding the left/right buttons), the buttons fade out again. Here's what I've got:
$(document).ready(function() {
$('#image-slider').mouseenter(function(){
$('.next').fadeIn('50');
$('.prev').fadeIn('50');
}).mouseout(function(){
$('.next').fadeOut('50');
$('.prev').fadeOut('50');
});
});
Bug #1: However, when you mouseover the image the buttons appear, and if you mouse over the buttons, they disappear. Naturally, of course they do, this is because I told them to fade away when I left the image area. First of all, I need them to stay visible even when you hover over them. So I need to somehow include the buttons as part of my image area in my javascript. That's the first problem/
Bug #2: This is a common problem I see in javascript. When you hover over the image, the buttons fade in, hover off, they fade out. Of course, there's a duration to this, and if you keep hovering in/out/in/out/in/out before the duration can finish, then when you let it fly, it will go on and off and on and off. How can I prevent this? So that is you hover out of the image area while the buttons are fading in, it just stops the animation sequence in its tracks so you don't get that continuous fading in/out.
Thanks in advance!
~ Jackson
ETA: the fix
I got it solved! A combination of your fix and #Pumou's.
I made another div just to wrap the two items and expanded it to cover the image, then I set the mouseover to be that div. Problem #1 solved.
I used puormo's .fadeTo() trick to solve problem #2.
Then, I used tweaks from everyone to shorten up the code so it was neat and tidy. Thanks to all!
I've decided on #jfriend00's solution. It's the shortest, great work!
Here's my final javascript:
$(document).ready(function() {
var b = $('.ps_next, .ps_prev');
$('#slider-wrapper').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(0,1).fadeIn(100) ) :
( b.stop(0,1).fadeOut(100) ) ;
});
});
Problem #2 can be fixed with .stop() which forces any previous animations to just to their conclusion before starting the next one.
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_next').stop(true, true).fadeIn(400);
$('.ps_prev').stop(true, true).fadeIn(400);
}, function () {
$('.ps_next').stop(true, true).fadeOut(400);
$('.ps_prev').stop(true, true).fadeOut(400);
});
});
It may be better to use the .hover() jQuery function which handles both enter and leave rather than mouseenter() and mouseout().
You can see both an example of .stop() and .hover() on this jQuery doc page doing almost the exact same thing you are.
For problem #1, I think we'd need to see the structure of your HTML to know how best to advise on that as their are several choices depending upon how things are structured. You could also do the fadeOut on a delay that was cancelled if they hovered over the button so there was time to get the mouse to the buttons before they disappeared. Or, you could use .hover() on a container that contained both image and buttons.
You can see it working here: http://jsfiddle.net/jfriend00/Zk6rY/.
Shortened the code (as seen in the above jsFiddle) even more to this:
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_button').stop(true, true).fadeIn(400);
}, function () {
$('.ps_button').stop(true, true).fadeOut(400);
});
});
$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').mouseenter(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
}).mouseout(function(){
$buttons.stop().fadeTo('50','0');
});
});
I have also used stop();. I've also shortened it to use one selector to select both buttons (in this case, it was set to the variable $buttons).
I noticed that if your mouse entered the image div, and then left, and then entered again, the buttons were fading in to 50% opacity because of the stop();. I fixed this by using the fadeTo(); feature: the first one is the duration, which was set to 50 like yours, and the second one is the opacity to fade to (a number between 0 and 1).
I also solved the problem of keeping the buttons there when you hover over them. See this line:
$buttons.mouseenter(function() { $buttons.show(); });
This just uses show();, which gives the element display:block; on mouseover.
Example here: http://jsfiddle.net/purmou/MM4ba/1/
More about stop(); here: http://api.jquery.com/stop
More about fadeTo(); here: http://api.jquery.com/fadeto
EDIT: Updated the code so that it now uses jQuery's hover(); function. Shorter code is always better.
$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').hover(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
},
function(){
$buttons.stop().fadeTo('50','0');
});
});
Example: http://jsfiddle.net/purmou/MM4ba/2/
More on hover(); here: http://api.jquery.com/hover
DEMO FIDDLE
var b = $('.btn');
$('#image-slider').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(false, true).fadeIn(300) ) :
( b.stop(false, true).fadeOut(300) ) ;
});
(with your markup and the use of ternary-operators)
You all might be looking for this awsmness.....
$(document).ready(function () {
$('#content').hover(function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
}, function () {
$('.a').stop(true).fadeOut(500);
$('.i').stop(true).fadeTo(500, 1);
});
$('.a').hover(function () {
$('.i').stop(true).fadeTo(500, 0.95);
}, function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
});
});
http://jsfiddle.net/Sourav242/p0z0oh82/