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.
Related
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/
I'm pretty new to jQuery and I've been fooling around with its animate() but I've run into two problems. My code below is basically supposed to expand the characterwindow when the mouse is hovering over it, changing the text inside once it's expanded. Then characterwindow should retract back to it's original size when the mouse goes off the now larger version of it, changing the text as it starts to retract.
My problem is that this is just generally screwy as hell. If you just zoom your mouse in and out a few times it constantly expands and retracts for a bit without you doing anything, and the text flickers when you go in and out and doesn't even disappear before the retraction like it should.
I tried using the callback parameter for the mouseover, but sometimes the text would show up before the animation actually finished.
Is this a limitation of jQuery, JavaScript, my server, my client, or what? If there's a better/more efficient way to implement this I'd be grateful if you showed it.
<html>
<body>
<div id="characterwindow" style="width:80px;height:23px;border-radius:15px;">
<div id="characterwindowgraphic" style="border-radius:15px;background-color:#1C1C1C;height:23px;width:80px;">
<center><p1 id="characterwindowtext" style="color:white;">Character</p1></center>
</div></div>
<script>
$("#characterwindow").mouseover(function() {
setTimeout(function(){$("#characterwindowtext").html("Character<br><br>Name<br>Details");},500);
$("#characterwindow").css({"width":"300px","height":"250px"});
$("#characterwindowgraphic").animate({
width:'300px',
height:'250px'
},500);
});
$("#characterwindow").mouseleave(function() {
$("#characterwindowtext").text("Character");
$("#characterwindow").css({"width":"80px","height":"23px"});
$("#characterwindowgraphic").animate({
width:'80px',
height:'23px'
},500);
});
</script>
</body>
</html>
Your animation are getting queued. So it will not start another animation before the first one is done.
To stop that you can use stop() before the animation like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},500);
it will clear the queue.
Or you can call your animate like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},{duration : 500, queue : false});
Also as winterblood said in the comments, use mouseleave and mouseenter.
Here's a fiddle : http://jsfiddle.net/U6S3S/
EDIT : Also, instead of using a timeout for the html, use animate callback function. If you take the first method, it will be like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},500, function(){
$("#characterwindowtext").html("Character<br><br>Name<br>Details")
});
And if you choose the second method, it will be like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},{
duration : 500,
queue : false,
complete : function(){
$("#characterwindowtext").html("Character<br><br>Name<br>Details")
}
});
I've a scenario that requires me to detect animation stop of a periodically animated element and trigger a function. I've no control over the element's animation. The animation can be dynamic so I can't use clever setTimeout.
Long Story
The simplified form of the problem is that I'm using a third party jQuery sliding banners plugin that uses some obfuscated JavaScript to slide banners in and out. I'm in need of figuring out a hook on slideComplete sort of event, but all I have is an element id. Take this jsfiddle as an example and imagine that the javascript has been obfuscated. I need to trigger a function when the red box reaches the extremes and stops.
I'm aware of the :animated pseudo selector but I think it will need me to constantly poll the required element. I've gone through this, this, and this, but no avail. I've checked jquery promise but I couldn't figure out to use that in this scenario. This SO question is closest to my requirements but it has no answers.
P.S. Some more information that might be helpful:
The element isn't created by JavaScript, it is present on page load.
I've control over when to apply the plugin (that makes it periodically sliding banner) on the element
Most of the slideshow plugins I have used use changing classes at the end of the animation... You could extend the "addClass" method of jQuery to allow you to capture the class change as long as the plugin you use is using that method like it should:
(function($){
$.each(["addClass","removeClass"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
oldmethod.apply( this, arguments );
this.trigger(methodname+"change");
return this;
}
});
})(jQuery);
I threw together a fiddle here
Even with obfuscated code you should be able to use this method to check how they are sending in the arguments to animate (I use the "options" object when I send arguments to animate usually) and wrap their callback function in an anonymous function that triggers an event...
like this fiddle
Here is the relevant block of script:
(function($){
$.each(["animate"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
var args=arguments;
that=this;
var oldcall=args[2];
args[2]=function(){
oldcall();
console.log("slideFinish");
}
oldmethod.apply( this, args );
return this;
}
});
})(jQuery);
Well since you didn't give any indication as to what kind of animation is being done, I'm going to assume that its a horizontal/vertical translation, although I think this could be applied to other effects as well. Because I don't know how the animation is being accomplished, a setInterval evaluation would be the only way I can guess at how to do this.
var prevPos = 0;
var isAnimating = setInterval(function(){
if($(YOUROBJECT).css('top') == prevPos){
//logic here
}
else{
prevPos = $(YOUROBJECT).css('top');
}
},500);
That will evaluate the vertical position of the object every .5 seconds, and if the current vertical position is equal to the one taken .5 seconds ago, it will assume that animation has stopped and you can execute some code.
edit --
just noticed your jsfiddle had a horizontal translation, so the code for your jsfiddle is here http://jsfiddle.net/wZbNA/3/
Could somebody please give me a few pointers on how to add a sliding dropdown area onto my home page similar to the following website: http://laptop-repair-manchester.co.uk. (Warning, trips for malware)
The thing I would like to imitate is the dropdown area that reads "call for a free quotation", it displays after about 5 seconds of the page loading.
If possible I would also like to add an image to the drop down slide effect.
Thanks in advance.
This can be quite straight-forward since jQuery has a .slideDown function: http://jsfiddle.net/QWqj5/.
setTimeout(function() {
$("#alert").slideDown(2000); // slide duration of 2 seconds
}, 5000); // execute after 5 seconds
To achieve this, you can create a div at the top of your page containing all the information that you want and then apply JQuery's slide down function on this div.
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);
});
});