|
Documentation
Main documentation including examples.
IntroductionAnimated Hover is a plugin for jQuery to create animated hover effects. See the demonstration page for examples. RequirementsAnimated Hover depends on jQuery 1.2 or greater, and the Dimensions plugin. In order to effectively use Animated Hover, the following CSS rules should be applied:
UsageThe simplest possible usage is below. This will dynamically create a hover element (which is then styled) whenever the mouse hovers over a list item: $('ul li').ahover();The CSS might look something like this: /* The hovered items' parent */
ul { position: relative; }
/* The hovered items */
ul li {
position: relative;
z-index: 100;
}
/* The hover element, dynamically created */
div.ahover {
position: absolute;
z-index: 99;
background: #cef;
}ahover supports the following options:
For example, the following will make a looping pulsate effect that slides quickly between items: $('ul li').ahover({moveSpeed: 100, hoverEffect: function() {
$(this)
.animate({opacity: 0.5}, 750)
.animate({opacity: 1.0}, 750)
.dequeue();
$(this).queue(arguments.callee);
}});
|
Sign in to add a comment
fffff
vbvcvbxcv
I am using your plugin. It was simple to implement and works as advertised. Which is to say very well. NICE!
thank u,good codes.
it doesn't seen to work on IE6
fg
Doesn't work so good on IE6. On the demo page, the first two examples show the highlight too far to the right. Third example works OK though.
I had the same IE6 problem. Finally figured out that in order for it to work right in IE6, you have to give the UL a width. Otherwise the hover shows up far to the right of the LI.
Now that dimensions is rolled into jQuery 1.2.6, is the separate dimensions plugin still a requirement? I'll know myself in a few minutes when I try it, but I just thought it could be stated explicitly.
To confirm what many of you know, but isn't stated explicitly, I didn't have to add a separate dimensions plugin to use this with jQuery 1.2.6. Even for IE6 (if that matters)!
Can you/anyone document how to remove/unbind the effect? Thanks!
adam gibi anlatin a.q
the up.png image i can't found
anyone have any luck getting a list text to align right?
<li> <div align="right"><a href="../forex.html" target="_self">valutno trgovanje</a></div> </li> is that what u had in mind...
and now for something completely different ;) :
i'm trying to make an left to right change of backgrond color ... background : #3AA8FF; border-left : 10px solid #0232AE;
and on hover i'd like the background to change from left to right to the border color like the border expands.... i managed to do it but the background color expands in the background of the original background (the z-index thingy) - since the plugin requires z-index of parent to be great to work properly i can't figure out how to do it...
any ideas?
for future generations :)
i managed a workaround .... u put the ul backroung in desired color and make list item to have top&bottom borders (white or background color)... looks the same nad works :)
Very nice and very simple to use. Thanks a million!
I'm probably one of the very few peole who can't get this to work. Any ideas what I might be doing wrong. None of my div.ahover styles are showing up.
Is there a way to switch of the ahover?! I use this to highlight selection-items, and want to disable the highlighting of items that cannot be selected. Any ideas for a ahover.die?!
ok, this may not be the most elegant solution, but to switch of the ahover, you can simply unbind the mouseover/mouseout-events like this:
$('li.hoverMe').unbind('mouseover').unbind('mouseout');
I want to adjust the height of the hover element so that it looks like a thick underline moving under the links. I'm not a programmer so idiot-proof instructions would be best - thanks in advance
Help needed: when i put a ul in a div, the div.ahover appears after the div, not in. This way, the hover element in't aligned with the li, and looks kinda silly.
Is there an easy way out for this?
Thanks in advance!
Very Nice, thank you for all
me parece atracativo lo probare y dire ke tal estuvo =)