I am using jquery to display text when clicked on a state with some animation. The problem is the animation effect is running only for the first time the state is clicked and not on the second time. The code is as follows:
$("#maharashtra").live("click",function(){
$("#mainbg").hide();
$("#divmaha").animate({left:"700px"});
$("#divmaha").show() ;
$("#divguj").hide();
$("#divgoa").hide();
$("#divkerala").hide();
$("#divassam").hide();
$("#divmeghalaya").hide();
$("#divarunachal").hide();
$("#divmizoram").hide();
$("#divkarnataka").hide();
$("#divandhra").hide();
$("#divtamilnadu").hide();
$("#divraj").hide();
$("#divjammu").hide();
$("#divuttaranchal").hide();
$("#divhp").hide();
$("#divharyana").hide();
$("#divpunjab").hide();
$("#divdelhi").hide();
$("#divmadhya").hide();
$("#divjharkhand").hide();
$("#divchattisgarh").hide();
$("#divup").hide();
$("#divorissa").hide();
$("#divbihar").hide();
$("#divwestbengal").hide();
$("#divsikkim").hide();
$("#divtripura").hide();
$("#divnagaland").hide();
});
That's because your animation has already been performed. Now, introduce a "Reset" button and add reverse of everything in the animation so it moves back to its original place. Now again whenever someone would click that animate button, it'll animate.
Btw, you can compress this code. Combine the selectors and separate them with comma.
Try to make it on
$("#maharashtra").on("click",function(){ });
Since you havent provided your full code i have another guess that you may not have reset the animation.
after hiding all that stuffs.. are u showing all dose hidden stuffs before the second click.?
because animation get performed on first click. try this. you will get to know what the problem.
$("#maharashtra").live("click",function(){
reset();
$("#mainbg").hide();
$("#divmaha").animate({left:"+=700px"});
$("#divmaha").show() ;
});
function reset ()
{
//reset your element to original position here and then you dont need write +=700px you can simply write left:"700px"
}
Now your element will get animatte to left by 700px on each click if you want to.
fiddle: http://jsfiddle.net/chetandoke/QwWUn/
Related
Currently I am using one pic for mouse on state, one pic for mouse off state, so , what I am doing is when the mouse is over the pic, it hide, than show the other one, for the detail , please have a look at my site.
http://rsvp.com.hk/tmp_web/
You can see the effect when mouseover the right side phone, but the transaction time is very quick, how can I slow down? Thanks
Here is my code
$(".phone.off").on("mouseover",function(){
$(this).hide();
$(".phone.on").show();
});
$(".phone.on").on("mouseover",function(){
$(this).hide();
$(".phone.off").show();
});
phone.on is the image of mouseover, and phone.off is on leave, the animation right now is correct but it go too fast, what I would like is slow it down. That 's all , thanks for helping.
Hhmm bad idea. Try using CSS3 animations, that's what they are for. Javascript should be second choice.
Although #micea is answering your question, maybe you are looking for something like that, for a smoother behaviour:
$(".phone.on").fadeIn(1000);
or
$(".phone.on").fadeOut(1000);
Where the number represents the duration of the animation.
Just add time to the .show() and .hide() like this
$(".phone.off").on("mouseover",function(){
$(this).hide('1000');
$(".phone.on").show('1000');
});
$(".phone.on").on("mouseover",function(){
$(this).hide('1000');
$(".phone.off").show('1000');
});
Where 1000 is one second, change to whatever you like.
i have 2 divs which toggles in every 3 seconds. now for the text in the div i am using an extension called sliding letters, as you can see in the demo available here. http://tympanus.net/Development/SlidingLetters/
The problem is, it works alone but now with toggle.
i have my working version located here http://webmaster.lk/n/
as you can see it is not showing the text "IMAGE 2" unless u hover it once.
can anybody please help me resolve this ?
i have the same created as a fiddle here, http://jsfiddle.net/KuW6K/5/
without hoverwords() - http://jsfiddle.net/KuW6K/4/ this is working correctly.
<body style="background:#cdcdcd;">
<div class="sl_examples">
<!-- need to show one of the links below every 3 seconds-->
image4
image2
</div>
</body>
Update
sample demo of the letter sliding extension - http://tympanus.net/Development/SlidingLetters/
Update 2
i removed the toggle() and re wrote it this was as in the answer 1 it was mentioned as toggle() is depreciated. but still no good.
$(document).ready(function() {
setInterval(function(){
if($("#example1").is(":visible"))
$("#example1").hide();
else
$("#example1").show();
if($("#example2").is(":visible"))
$("#example2").hide();
else
$("#example2").show();
},3000);
});
Update 3
I have attached the source here for reference, https://www.mediafire.com/?fi8547rhm1q8ixt
Update 4
actually it should only work when mouse enters and mouse leave. but here the problem is, (check this) http://webmaster.lk/n/ first it shows IMAGE 4 (red background) and when you hover it IMAGE 3 appears (light blue letters) then afer 3 seconds, Green color plain background appears without the text IMAGE 2. this is the problem why it is not working as IMAGE 4 works.
Your initial issue was caused because you were setting #example1 to display none;
#example1 {
background: green;
display: none;
}
And then you were calling
$('#example1').hoverwords();
This was causing the blank background.
So just remove the display:none; css and call hoverwords on example1 before it's hidden.
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
And then hide it after using jQuery.
It looks like you have a simillar working solution in your Update 4
http://jsfiddle.net/trevordowdle/KuW6K/15/
While it works well you can still trigger the error. This happens when hovering back and forth and the setInterval triggers at the same time. The toggle from the trigger and the hoverwords function if ran at near the same time interfere with each other and you don't get the desired result.
One option is to stop the words from changing while they are being hovered.
Like:
jQuery
var hover = false;
setInterval(function () {
if(!hover){
$('#example1').toggle();
$('#example2').toggle();
}
}, 3000);
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
$('.sl_examples').hover(function(){
hover = true;
},function(){
hover = false;
});
CSS
#example1 {
background: green;
}
http://jsfiddle.net/trevordowdle/KuW6K/14/
And if you would would rather have it reset the timer.. Meaning that once your done hovering the 3 second timer starts from 0. Here is another example:
http://jsfiddle.net/trevordowdle/KuW6K/16/
.toggle() is deprecated
http://api.jquery.com/toggle-event/
Check here for an equivalent
Equivalent of deprecated jQuery Toggle Event
UPDATE
So the real issue here is the way that the Sliding Letters library binds the event which triggers itself. This is the line doing the binding:
$el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
aux.toggleChars($el, settings);
});
As you can see it is only bound to fire on mouseenter and mouseleave. Since you want this to trigger on an interval you need to alter the existing or create a new binding.
I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.
Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.
Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
I am working on some tabbed navigation for my website and I have an issue I'd like to fix.
I've been scrambling my head all day and getting nowhere. Would really appreciate some help.
Here be the code: http://jsfiddle.net/EghAt/
1) Notice when you click Tab 1 and then immediately click Tab 2, Tab 1 continues to loop out all the results.
I would prefer if this stopped looping Tab 1 results and just started looping Tab 2 results.
Is this possible?
How do I achieve this?
Many thanks for any pointers
You can stop the previous animation in this function of yours, by adding the .stop(true, true) you see in this revised function:
function fadeOutItems(ele, delay) {
var $$ = $(ele), $n = $$.next();
// Toggle the active class
$$.toggleClass('active');
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
delay ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideToggle('fast');
});
}
}
Since you call this on both the currently active tab and the newly active tab, this should stop any animations underway on the currently active tab.
See the jQuery doc on .stop() for details.
In looking at this code further, I believe it does what you literally asked for in your question (it stops the previous tab looping and starts the next tab), but I'm not sure that's actually what you want because it leaves the items in a tab only partially expanded. If that's what you want, then this will do that.
If that's not what you want, then the code will have to be modified a bit further to not only stop the currently running animations, but to put all the items for the old tab into the same state.
As I suspected, you actually want more than you asked for (per your most recent comments). You want the previously items to be hidden, no matter what state they were in previously. You can do that with this code where I changed the slideToggle() to a slideUp(). You can't use any form of toggle if the animation hasn't started yet because toggle will go the wrong way (it just reverses the state). Instead, when hiding you have to use a definitive animation that ends with the item not visible. You can use this code where I used slideUp() but you could pick something different if you wanted:
// A helper function that allows multiple LI elements to be either
// faded in or out or slide toggled up and down
function fadeOutItems(ele, show) {
var $$ = $(ele), $n = $$.next();
// Toggle the active class
$$.toggleClass('active');
// Ensure the next element exists and has the correct nodeType
// of an unordered list aka "UL"
if ($n.length && $n[0].nodeName === 'UL') {
$('li', $n).each(function(i) {
// Determine whether to use a fade effect or a very quick
// sliding effect
show ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideUp('fast');
});
}
}
You can see that in action here: http://jsfiddle.net/jfriend00/rzd3N/.
The problem is here.
$(this).delay(i * 400).fadeToggle('slow')
You are giving a fede effect to each element at once, by increasing delay.
It's not easy to stop it this way. The correct way to do this is to call a function which will only fade an element at a time. Then this function will be executed again at a given time interval (400 in your case), and fade the next element.
This way, passing a variable to the function, for example stopExecuting=true, will stop the effects.
Take a look at setInterval and setTimeout to achieve this.
I'm asking a question very similar to this one—dare I say identical?
An example is currently in the bottom navigation on this page.
I'm looking to display the name and link of the next and previous page when a user hovers over their respective icons. I'm pretty sure my solution will entail binding or timers, neither of which I'm seeming to understand very well at the moment.
Currently, I have:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
$(this).siblings(dropdown).fadeIn();
}, function(){
setTimeout(function(){
dropdown.fadeOut();
}, 3000);
});
});
with its respective HTML (some ExpressionEngine code included—apologies):
<p class="older_entry">Older<span class="hide_me">Older entry:
<br />
{title}</span></p>
{/exp:weblog:next_entry}
<p class="blog_home">Blog Main<span class="hide_me">Back to the blog</span></p>
{exp:weblog:prev_entry weblog="blog"}
<p class="newer_entry">Newer<span class="hide_me">Newer entry:
<br />
{title}</span></p>
This is behaving pretty strangely at the moment. Sometimes it waits three seconds, sometimes it waits one second, sometimes it doesn't fade out altogether.
Essentially, I'm looking to fade in 'span.hide_me' on hover of the icons ('a.paginate_link'), and I'd like it to remain visible when users mouse over the span.
Think anyone could help walk me through this process and understand exactly how the timers and clearing of the timers is working?
Thanks so much, Stack Overflow. You guys have been incredible as I walk down this road of learning to make the internet.
If you just want to get it working, you can try to use a tooltip plugin like this one.
If you want to understand how this should be done: first, get rid of the timeout, and make it work without it. The difference (from the user's point of view) is very small, and it simplifies stuff (developing and debugging). After you get it working like you want, put the timeout back in.
Now, the problem is you don't really want to hide the shown element on the navigator mouse-out event. You want to hide it in its own mouse out event. So I think you can just pass the first argument to the navigator hover function, and add another hover to dropdowns, that will have an empty function as a first argument, and the hiding code in its second argument.
EDIT (according to your response to stefpet's answer)
I understand that you DO want the dropdown to disappear if the mouse moves out of the navigator, UNLESS its moved to the dropdown itself. This complicates a little, but here is how it can be done: on both types of items mouse-out event, you set a timer that calls a function that hides the dropdown. lets say the timer is 1 second. on both kind of item mouse-in even, you clear this timer (see the w3school page on timing for syntax, etc). plus, in the navigator's mouse-in you have to show the dropdown.
Another issue with the timer in your code is that it will always execute when mouse-out. Due to the 3 seconds delay you might very well trigger it again when mouse-over but since the timer still exist it will fade out despite you actually have the mouse over the element.
Moving the mouse back and forth quickly will trigger multiple timers.
Try to get it to work without the timer first, then (if really needed) add the additional complexity with the delay (which you must keep track of and remove/reset depending on state).
Here was the final working code, for anyone who comes across this again. Feel free to let me know if I could have improved it in any ways:
$(document).ready(function() {
var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');
dropdown.hide();
$(navigator).hover(function(){
clearTimeout(emptyTimer);
$(this).siblings(dropdown).fadeIn();
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
$(dropdown).hover(function(){
clearTimeout(emptyTimer);
}, function(){
emptyTimer = setTimeout(function(){
dropdown.fadeOut();
}, 500);
});
});