Change CSS property using Jquery on Image

Question

I want to change the Css to opacity 1 when item is clicked.

Following is the code (html)

<a href="#"><img class="<?php if($favorite == 1){ echo 'alreadyfavorite';} else { echo 'addtofavorite';} ?>" id="<?php 
                while($data5=$select5->fetch()){
                echo $data5['favorite_properties_id'];
                }
                ?>" src="../images/system/addtofavorite.png"></a>

Jquery

$('.alreadyfavorite').click(function()
{
    event.preventDefault();
    var del_id = $(this).attr('id');



    $.ajax(
    {
        type: 'POST',
        url: '../controllers/deletefavoriteproperties.php',
        data:
        {
            del_id: del_id
        },
        success: function(data)
        {
       $('.alreadyfavorite').css("addtofavorite");   

        }
    });
});

neither this

$('.alreadyfavorite').css("addtofavorite");

nor this

$('.alreadyfavorite').css("opacity:1;");

is working....

$('.alreadyfavorite').css("opacity",1);

Guruprasad J Rao
– Guruprasad J Rao

2017-01-30 05:11:21 +00:00
Commented Jan 30, 2017 at 5:11 — Guruprasad J Rao
– Guruprasad J Rao, Commented Jan 30, 2017 at 5:11
This is working thanks.

DragonFire
– DragonFire

2017-01-30 05:13:11 +00:00
Commented Jan 30, 2017 at 5:13 — DragonFire
– DragonFire, Commented Jan 30, 2017 at 5:13

Guruprasad J Rao · Accepted Answer · 2017-01-30 05:27:47Z

3

To point out exactly what's wrong, its the way you are using .css property.

This is how you are supposed to use it.

$('.alreadyfavorite').css("opacity",1);

If you are going to change multiple CSS properties you can use as below:

$('.alreadyfavorite').css({"background-color": "yellow", "opacity":"1"});

EDIT

There are multiple ways to get fade effect. You can either look for css animations or you can use jquery's fadeIn instead of css

Below is the working snippet demonstrating both.

$(document).ready(function(){
  $(".fadeInJquery").on('click',function(){
      $("#fadeJquery").fadeIn("slow");
  });
   $(".fadeInCSS").on('click',function(){
      $("#fadeInCSS").css("opacity",1);
  });
});

#fadeInCSS{
  opacity:0;
  -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#fadeJquery{
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="fadeInJquery">Fade In Jquery</button>

<div id="fadeJquery">Jquery faded in div</div>

<button class="fadeInCSS">Fade In CSS</button>

<div id="fadeInCSS">CSS faded in div</div>

edited Jan 30, 2017 at 5:27

answered Jan 30, 2017 at 5:14

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

4 Comments

DragonFire Over a year ago

This is completely fading out the image.

Guruprasad J Rao Over a year ago

Updated the answer @DragonFire

DragonFire Over a year ago

this is simpler for beginners like me to understand

Guruprasad J Rao Over a year ago

Great.. Happy coding.. :)

Collectives™ on Stack Overflow

Change CSS property using Jquery on Image

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related