CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kaboom
kaboom

Reputation: 307

jquery pass a hovering element to a function

I have many tabs with html class "panel". when users hover a tab, the opacity become 0.4. When they move their mouse out of a tab, then the opacity become normal. This is my code but it doesn't work. No error reported on dev tool. It may have something to do the hovering element that is passed to the function. What are "event" and "$(this)" in this case?

index.html

        <div class="panel">
            text text text
        </div>
        <div class="panel ">
            text text text
        </div>

shared.js

    $(".panel").on("mouseover", hoverUnownedPT(event))
                                .on("mouseout", stopHoveringUnownedPT(event));


function hoverUnownedPT(e){
    $(this).css({
        "opacity": "0.4",
        "filter": "alpha(opacity:40)"
    });
}

function stopHoveringUnownedPT(e){
    $(this).css({
        "opacity": "1",
        "filter": "alpha(opacity:100)"
    });
}

Upvotes: 1

Views: 1326

Answers (3)

Timothy
Timothy

Reputation: 1158

You could simply use css without javascript using :hover and css3 transitions to make in smooth.

.panel {
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}
.panel:hover {
    opacity: 0.4;
}

Demo

Upvotes: 0

Noi Sek
Noi Sek

Reputation: 544

As another answer mentioned, you're calling the functions rather than passing them as callbacks, omit the () to pass the actual function object.

What you want is:

$(".panel").on("mouseover", hoverUnownedPT)
           .on("mouseout", stopHoveringUnownedPT);

Or alternatively:

$(".panel").on("mouseover", function(){
    hoverUnownedPT($(this));
})
.on("mouseout", function(){
    stopHoveringUnownedPT($(this));
});

function hoverUnownedPT(panel){
    panel.css({
        "opacity": "0.4",
        "filter": "alpha(opacity:40)"
    });
}

function stopHoveringUnownedPT(panel){
    panel.css({
        "opacity": "1",
        "filter": "alpha(opacity:100)"
    });
}

If that doesn't help you understand the purpose of the $(this) operator, it represents the current object in whatever scope it's used in. In this case, your previous code represented the actual function objects themselves, and so didn't work.

You can test this out by doing something similar to the following and observing the output:

function testMe(x) {
    this.x = x;
}

var testInstance = new testMe(10);
alert(testInstance.x);

Read more about 'this' here.

Upvotes: 2

JLRishe
JLRishe

Reputation: 101690

You are calling your functions instead of passing them to the .on() method (and you're using an undeclared event variable). Try this:

$(".panel").on("mouseover", hoverUnownedPT)
           .on("mouseout", stopHoveringUnownedPT);

If you were using strict mode, your browser console would have probably caught at least one of the problems in your code.

Upvotes: 0

Related Questions