在圖像上使用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> 

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"); 

     } 
    }); 
}); 

既不此

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

也不此

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

正在工作....

Answer 1

要指出到底出了什麼問題，它使用的方式是.css屬性。

這就是你應該如何使用它。

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

如果你要改變多個CSS屬性，你可以如下使用：

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

編輯

有多種方式來獲得fade效果。您可以查找css animations或者您可以使用jquery'sfadeIn而不是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>