1

toggleClass を適用しようとしていますが、新しいクラスが適用されていません。どうしたの？

<a href="#" id="cf_onclick">Click</a> 
<div id="main" class="invisible">
Hi there            
</div> 

.invisible{
   opacity: 0;

}
.visible{
  opacity: 1;
  -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
}


$(document).ready(function() {
  $("#cf_onclick").click(function() {
  $("#main").toggleClass("visible");
});
});

これがjsFiddleです

http://jsfiddle.net/Gilgamesh415/grxQX/17/

4

4 に答える 4

1

これを試して： 

 <script type="text/javascript">
    $(document).ready(function() {
    $("#s").click(function(){

$("#main").toggleClass("n");
});
});
</script>



<div id="main" class="m"></div>
<button id="s">click</button>

<style type="text/css">
    .m
{ opacity:0;}
.n
{
 width:100px;
    height:100px;
    border:2px solid yellow;
    background:green; 
    -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
    opacity: 1;   
}
</style>

ここでのデモ: http://jsfiddle.net/65Hg4/1/

于 2013-08-25T08:07:03.277 に答える