Live Demo with visible code; http://jsfiddle.net/3eEgb/4/
The demo should be fairly self explanatory; I'm finding the length of a sentence inside a wrapper with the overflow hidden, and if it's wider than the wrapper I'm running an animation function that slides it along, revealing the remaining text.
However I'm having problems with the mouseout part of the hover() function. When the user mouses out I'd like the text to snap back to it's starting position.
According to the documentation (http://api.jquery.com/stop/) I should be able to .stop() the animation on the object - but I must be missing some detail because I can't get it to work as documented. If I could get .stop() to function I presume I can chain it with .css() to set margin:0 to move the text back to it's original position.
$(this).stop().css("color", "red"); //This isn't working ARR!
is the source of my frustrations. I've tried all the various ways I could think of to no avail.
Thanks!
You're animating the .width element, but stopping the .track-version element.
Change the mouseleave handler to $(e).find(".width").stop().
Related
So basically I have css that causes an element to get bigger (increase height) when it hovers. I want to be able to have a function that allows you to click the element, disable the hover functionality (by setting the height back to it's normal state with .css()), fire a different segment of code, and then set the hover height back to normal when done. Since .css() doesn't have a callback functionality, I'm kind of stumped regarding how to do this.
Here's a jsfiddle that kind gives the layout of what I want to do.
http://jsfiddle.net/lennox02/99KB2/3/
And here's the lines of code in question
//this fires first, disabling the hover height of 200px;
$(".single-item:hover").css({"height":"100px"});
//the code I want to fire, fires second
$("#6").html("Hello");
//after the code finishes firing, put the hover height back to how it was
$(".single-item:hover").css({"height":"200px"});
Try this, I think it's closer to what you want http://jsfiddle.net/99KB2/6/ but probably not exact. You might have to look into JavaScript callbacks if this isn't good enough.
$(".single-item").on('click', function() {
//this fires first, disabling the hover height of 200px;
$(this).css("height", "100px");
//the code I want to fire, fires second
$("#6").html("Hello");
});
$(".single-item").on('mouseout', function() {
$(this).css("height", "");
});
Also, it's much easier to use all jQuery events instead of mixing JavaScript and jQuery.
I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.
Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.
$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.
If you check the following link for my working example:
http://jsfiddle.net/xavi3r/Cd8cV/
You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);
$('#container .animateMe').prepend($('#container .animateMe .copy ').clone().removeClass('copy').removeClass('active'));
I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.
This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.
Check it out :
http://jsfiddle.net/SxFPc/
I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.
I have a button that, when hovered over, shows a <span> that is otherwise hidden. What I'm trying to figure out is how to transition the button's expansion on :hover so it's more smooth. I tried using CSS3 transitions but couldn't quite get it down. Plus I don't know if that's the best solution anyway.
EDIT: I added some jQuery but must have something wrong. Here's the script I used, after reading a previous answer here (which I'll reference if I can find it again):
$('a:has(span)').hover(
function() { $('span', this).fadeIn(); },
function() { $('span', this).fadeOut(); },
);
I've created a Fiddle: http://jsfiddle.net/UYexr/. Can anyone help me out?
If I were you I would avoid using CSS3 simply because of its lack of support; given that I would probably stick to JS animation.
The best way I would see to do this is to make the span have display:inline-block; with a defined width. Then you can use a javascript animation library to animate the span's display.
Personally, I would go about using jQuery's animate method. Although there are plenty of js animation libraries...
I'm trying to have the following:
There is a fixed positioned div on the bottom of my page. When the mouse enters and exits the div animates its height to resp. 100px and 50px. The default height is 50px.
I've found that Jquery does this correctly with only one big no-no. When the mouse exits while animating and then reenters again it either:
a) stacks the animations leading to a lot (say 100) animations being done, while only one was necessary.
b) resets current animations, which leads to unexpected behavior like the div disappearing, changing to a fixed height which locks down or glitching up and down between 100 and 50 pixels.
Any ideas on this?
When you handle your mouseover and mouseout events, you should use the stop() function to clear the animation queue. It will let you jump to the end of the animation (before you start another one) if needed. You can also clear the whole queue of animations.
From the jQuery API documentation :
The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave:
<div id="hoverme">
Hover me
<img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>
We can create a nice fade effect without the common problem of multiple
queued animations by adding
.stop(true, true) to the chain:
$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});
Rather than firing off an animation event on every action, how about having a function that constantly polls specific variables, and acts accordingly - by moving or not moving a certain (variable) amount. Your mouseover and mouseout events would then modify those variables that are polled, and so you wouldn't have to worry about triggering hundreds of animations. Let me know if I'm not making sense so I can clarify..
The only solution I've found so far to work is to give both the mouseenter and mouseexit animation a ClearQueue() before animating, but I think this might be unwanted in some cases.
In the case of using animate() this works quite nicely, but with slideUp and other default JQuery animations it leads to improper behavior.