Hovering effect on image in jQuery/javascript

Question

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.

@dusan jovanov thanks for that input, however the hover over effect still isn't working for me. — lala
– lala, Commented Feb 14, 2017 at 2:00
This works for me : <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".imageCS").hover(function(){ $(this).animate({"opacity":0.3},500) }, function(){ $(this).animate({"opacity":1},500) }); }); </script> ..... <div id="myCols" class="container"> <img src="Koala.jpg" class="imageCS"> </div> — Dusan Jovanov
– Dusan Jovanov, Commented Feb 14, 2017 at 11:41

Afnan Ahmad · Accepted Answer · 2017-02-14 08:15:49Z

1

. 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.

edited Feb 14, 2017 at 8:15

answered Feb 13, 2017 at 15:30

Afnan Ahmad

2,5424 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lala Over a year ago

sorry afnan, but I have to use hover over and hover out as well for this case. DO i just replacethe mouseover with hover? Also, I am not allowed to use CSS. Am I still suppose to use $(this).css?

Afnan Ahmad Over a year ago

@lala you were told to only touch the .js file so this has nothing to do with .css file. you can use it in your js file.

Collectives™ on Stack Overflow

Hovering effect on image in jQuery/javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related