Jquery fadeTo on mouseover

Question

I am using a plugin called anything slider and am trying to make the controls fade after 4 seconds (which is working) then change opacity back to 1 on mouseover (not working). Here is what I have so far...what am I doing wrong?

$(slider.$controls).mouseover(function() 
slider.$controls.fadeTo(400, 1.0);
});

$(function () {
    var fadeTime = 400,
        fadeDelay = 4000,
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.fadeTo(fadeTime, 0.3);
                $('.tooltip').fadeOut(fadeTime);
            }, fadeDelay);
        };
});

Answer 1

you sould replace every slider.$controls.fadeTo with slider.controls.fadeTo

$(slider.controls).mouseover(function() 

    $(this).fadeTo(400, 1.0);

});

Answer 2

You have a syntax error on line 2. Where you have

slider.$controls.fadeTo...

you should have

$(this).fadeTo...

because once you've entered the anonymous function on line 1, the this object now refers to the DOM element upon which you're executing this code, which is the element represented by slider.controls.

Answer 3

First you use slider.controls to target the control element(s), then you use slider.$controls to target the same element(s). I think you need to decide which one it is.

Also, inside a callback function you can use this as a reference to the element that has had the event fired on it:

$(slider.controls).bind('mouseover', function () {
    $(this)...
});

Otherwise if you want to fade-in-out all the controls at the same time then you just need to figure out if you need to use slider.$controls or slider.controls.

UPDATE

I see you have changed your question and now you are using slider.$controls both times. You should put your mouseover code inside the document.ready event handler so you know the DOM elements are available:

$(function () {

    slider.$controls.mouseover(function() 
        slider.$controls.fadeTo(400, 1.0);
    });

    var fadeTime = 400,
        fadeDelay = 4000,
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.fadeTo(fadeTime, 0.3);
                $('.tooltip').fadeOut(fadeTime);
            }, fadeDelay);
        };

Also I noticed that you wrapped slider.$controls in a jQuery object the first time, but not the second, make sure to do that if slider.$controls is not already a jQuery object (many times developers put a $ as the first character of a variable name to denote that it is a jQuery object).