Hi
I'm hijacking your thread to challenge you ( if its possible ;-) ).
I 'm trying (with no success) to do the same as you, but fades in addition:
on over : hovered image fades in - tab goes up
on out : tab goes down - image fades out
I tried a lot of different ways, with queue() dequeue(), using hover()
or onmousehover(),
using $this = $(this); really a lot of different variation and I got a
lot of different fancy results,
With most of times the hovers fx being repeated lots of times, some
strange flickering or so.
Any I'll kept trying, but any help, any pointer to a tutorial for
animations would be much appreciated.
-Olivier.
Karl Swedberg wrote:
Hi everyone,
Someone asked me to try to replicate something he saw here:
http://www.andrewsellick.com/examples/tabslideV2-mootools/
It looked pretty straightforward, and I was able to reproduce the main
effect pretty easily -- except that the Moo tools one looks better
because it doesn't try to slide up every tab when the mouse goes
quickly over a number of them. You can see the problem with mine here
(note, I changed the photo and tab colors to protect the innocent):
http://test.learningjquery.com/tabslide/
I know this little problem can be resolved with the hoverIntent
plugin, but I'd like to gain a better understanding of the new
animation methods in jQuery 1.2, and I thought that one of them would
help, but I can't quite get things to work. I tried various
combinations of .queue() and .dequeue() and .stop(), but nothing
worked right.
So here is what I have now. As you can see, I also tried using the new
:animated selector, and that almost worked, but not quite (which is
why it's commented out now):
$(document).ready(function() {
var $panelBodies = $('div.panel_body');
$panelBodies.slice(1).hide();
var slideTabs = function() {
var $this = $(this);
$this.parent().siblings().children('div.panel_body')
.animate({height: 'hide'}, 300, function() {
$(this).prev().removeClass('visible');
});
// if ($panelBodies.filter(':animated').length < 2) {
$this.next(':hidden').animate({height: 'show'}, 300,
function() {
$(this).prev().addClass('visible');
});
// }
};
$('div.panel_container > h3').mouseover(slideTabs);
});
Can anybody help this poor lost boy?
thanks,
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
