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




Reply via email to