CODEWITHSUNDEEP
javascripthtmlhover
lala
lala

Reputation: 151

Hovering effect on image in jQuery/javascript

Before helping, I am aware CSS is much easier, but please do not give CSS solutions as I was told to only touch the .js file.

I am not sure what is wrong here in my code as I've searched online and this is what I believe I should have in my code, however my image isn't having the opacity and duration effect at all that I intended it to have.

Here is part of the HTML that is involved with the javascript:

<div id="content">
    <div id="myCols" class="container">
        <div class="col1">
            <img src="images/boxImage1.jpg" class="imageCS"/>
        </div>
        <div class="col2">
            <img src="images/boxImage2.png" class="imageCS"/>
        </div>
        <div class="col3">
            <img src="images/boxImage3.jpg" class="imageCS"/>
        </div>
    </div>
</div>

Here is the javascript that I have keyed in:

$(document).ready(function()
{


    $("imageCS").hover(function()

        //hover over opacity 30% at 0.5 sec
        $(this).stop().animate({opacity: "0.3"}, "0.5"); 
    ),

    function()
    (
        //hover out opacity 100% at 1 sec
        $(this).stop().animate({opacity: "1"}, "1"); 
    )




});

I am not sure what is wrong as the effect isn't even taking place.

Upvotes: 0

Views: 2644

Answers (1)

Afnan Ahmad
Afnan Ahmad

Reputation: 2542

. is missing in your element selection and you can use mouseover and mouseout.

$('.imageCS').mouseover(function(){
    $(this).css('opacity','.2');
    
}).mouseout(function(){
    $(this).css('opacity','1');
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" class="imageCS"/>

If you want to Use the hover see the following snippet:

 $('.imageCS').hover(		
   function () {
     $(this).css('opacity','.2');
   }, 
   function () {
     $(this).css('opacity','1');
   }
 );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" class="imageCS"/>

Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for: $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Check Documentation Here.

Upvotes: 1

Related Questions