CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RUGZ
RUGZ

Reputation: 75

$ is not a function on jQuery .hover() method?

I would like to have an "opacity change on hover" function (and it should work without CSS :hover):

$(document).ready($(function() {
    $( ".ba-gallery-grid.css-style-7 .ba-image img" ).hover(function() {
        $(this).css('opacity', '.3');
        $(this).css('opacity', '1');
    });
}));

With this HTML:

<div class="ba-gallery-grid css-style-7">
    <div class="ba-gallery-items category-0 category-1">
        <div class="ba-image"></div>
        <img data-original="***" alt="" src="***">
        <div class="ba-caption">
            <div class="ba-caption-content"></div>
        </div>
    </div>
</div>

But all I have is an error:

Uncaught TypeError: $ is not a function

Could anyone please help me to figure out what I have done wrong? Here is the page with full example http://lilianpix.ru/photos.

Upvotes: 2

Views: 3065

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

In the said page you have included jquery-noconflict.js, which calls jQuery.noConflict() that will reset the value of $. You can still use jQuery to refer to jquery so

Also note that, to hover you need to pass 2 callbacks, one to set the opacity when mouse enters and when mouse leaves

jQuery(function ($) {
    $(".ba-gallery-grid.css-style-7 .ba-image img").hover(function () {
        $(this).css('opacity', '.3');
    }, function () {
        $(this).css('opacity', '1');
    });
});

Upvotes: 6

Related Questions