button

by goropoo

HTML

<button id="blue">あお</button>
<button id="red">あか</button>

<button id="ani">button</button>

<p>hogehogehoge</p>
<div>hogehogehoge</div>

<button id="demo1">demo1</button>
<div id="target1">target1</div>
<button id="demo2">demo2</button>
<div id="target2">target2</div>

CSS

#target1 {
 width:200px; 
 height:200px;    
 background-color:blue;
 color:#ffffff;   
-webkit-border-radius: 20px; /* Webkit */
-moz-border-radius: 20px;    /* Mozilla */
border-radius: 20px;         /* CSS3 */
}

#target2 {
 width:200px; 
 height:200px;    
 background-color:#ff3333;
}

JavaScript

$(function() {



$('#blue').click(function() {
        $('p').css({"color": "#ffffff","background-color": "#0033cc","width": "200","height": "200"})
    });
        
  $('#red').click(function() {
        $('p').css({"color": "#ffffff","background-color": "#ff3333","width": "200","height": "100"})
    });

    $('#ani').mouseover(function() {
        $(this).css({"width":"500"})
    });
     $('#ani').mouseout(function() {
        $(this).css({"width":"50"})
    });

  $('#demo1').toggle(function() {　
         $(this).text('もう一回押してみて');
        $('#target1').slideUp().fadeTo('slow',1,function() {
            $('#target1').css({"color": "#ff3333",})
            $(this).hide();
            alert('display プロパティが none 時のアクション');
        });
    });
 });
                     
   function() {
        $('#target1').slideDown().fadeTo('slow',1,function() {
            $('#target1').css({"color": "#ffffff",})
            alert('display プロパティが block 時のアクション');
        });
    });

   $('#demo2').click(function() {
        $('#target2').slideToggle('fast');
    });


});

//$('p').fadeOut();　フェードイン
//$('p').html('<img src="imgs / memeta.gif " alt="" />');
//$('p').attr('src','dog.jpg');
//$('#box').addClass('hoge');　クラスを追加する
//$('#box').removeClass('hoge');　クラスを削除する。
//$('#box').fadeIn();　フェードイン
//$('#box').fadeOut();　フェードアウト
//$('#box').slideDown();
//$('#box').slideUp();
//$('#box').slideToggle();