.one and callback

Question

http://jsfiddle.net/EYQ3S/

$('#footer').one('hover', function() {
     $('#impressum_lang_container').stop().slideDown('slow', function(){
          $('body,html').animate({ scrollTop: $(document).height()}, 'slow');
          return false;
     });
}); 

I'm completely new with javascript, so thanks a lot for your help! It's highly appreciated :-)

I'm struggeling to unify two functions under a .one with a callback. I've made them work individualy, but now I don't know how to proceed.

I have a footer. There is a hover-effect that when the mouse gets over the footer, a new div rolls out below with more content. Now I want the side to auto-scroll to very bottom once the div is completely rolled out. That's why I try to put in a callback function.

Also, with my first solution, the scroll-down would be executed every time the user hovered the footer. I don't want that so I try using a .one-function. Also doesn't work yet.

Answer 1

There is no event called hover - it is a utility function used to register mouseenter and mouseleave handlers, you need to use mouseenter - when mouse enters the element and mouseleave when mouse leaves the element

$('#footer').one('mouseenter', function () {
    $('#impressum_lang_container').stop().slideDown('slow', function () {
        $('body,html').animate({
            scrollTop: $(document).height()
        }, 'slow');
        return false;
    });
});

Demo: Fiddle

Answer 2

Arun's answer works, but in my opinion the mouseover event should be used instead of mouseenter, because with mouseover while the user moves the cursor inside #footer the event will trigger again, whilst with mouseenter if the user scrolls down the page with the middle button without moving the cursor no event will be fired on mouse movement until you leave the element and hover on it again to trigger the mouseenter. It will be up to you to decide when this happens, but I would recommend testing both.

So, I would simply change

$('#footer').one('hover', function () {

to

$('#footer').one('mouseover', function () {