jquery - 在图像上使用 Jquery 更改 CSS 属性

Question

我想在单击元素时将 Css 更改为不透明度 1。

以下是代码(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>

查询

$('.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");   

        }
    });
});

这都不是

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

也不是这个

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

正在工作....

Answer 1

要准确指出问题所在，是您使用 .css 属性的方式。

这就是您应该如何使用它。

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

如果您要更改多个 CSS 属性，您可以使用以下方法:

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

编辑

有多种方法可以获得淡入淡出效果。您可以寻找 css 动画，也可以使用 jquery 的 fadeIn 而不是 css

下面是展示两者的工作片段。

$(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>