画像上で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"}); 

EDIT

をfade効果を得るために、複数の方法があります。あなたはどちらかcss animationsを探すことができます。また、css

は、以下の両方を実証する作業スニペットがあるjquery'sfadeInの代わりに使用することができます。

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