静止画の表示/非表示時に効果をつける

文字で説明するより上のボタンをクリックして確認いただければ一目瞭然です。今回はソースが長くなりそうだったのでhtml,js,cssに分けました。

htmlです。

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="event.js"></script>
</head>
<body>
<div id="wrap">
  <img id="wide" />
</div>
<hr>
<input type="button" id="hide" value="image hide">
<input type="button" id="show" value="image show">
<input type="button" id="toggle" value="image toggle">
<br>
<input type="button" id="fadeIn" value="image fadeIn">
<input type="button" id="fadeOut" value="image fadeOut">
<input type="button" id="fadeToggle" value="image fadeToggle">
<br>
<input type="button" id="slideUp" value="image slideUp">
<input type="button" id="slideDown" value="image slideDown">
<input type="button" id="slideToggle" value="image slideToggle">
</body>
</html>

ボタンを定義しています。
ボタンの定義では、onclickを記述するのが多いですがjQueryでは不要です。idでボタンの押下を処理します。

CSSです。

#list {
  margin: 0px;/* */
  padding: 0px;
}
#list li {
  margin: 2px;
  height: 80px;  
  list-style-type: none;
  float: left;
}
#list img {
  height: 45px;
  width: 84px;
}
hr {
  clear : both;
}
#wide {
  width: 480px;
  height: 270px;
}
#wrap {
  width: 400px;
  height: 300px;
}

画像が非表示になっても画像表示の範囲が残るように<div>で定義しています。

JavaScriptです。

jQuery(function($) {
  var img = $('#wide').attr('src', "p001.jpg");

  $('#hide').click(function(e) {
    img.hide("slow");
  })

  $('#show').click(function(e) {
    img.show("slow");
  })

  $('#fadeIn').click(function(e) {
    img.fadeIn(3000);
  })

  $('#fadeOut').click(function(e) {
    img.fadeOut(3000);
  })

  $('#fadeToggle').click(function(e) {
    img.fadeToggle(3000);
  })

  $('#toggle').click(function(e) {
    img.toggle(3000);
  })

  $('#slideUp').click(function(e) {
    img.slideUp(3000);
  })

  $('#slideDown').click(function(e) {
    img.slideDown(3000);
  })

  $('#slideToggle').click(function(e) {
    img.slideToggle(3000);
  })
})

非常に簡単なコードになっています。引数を、
img.hide("slow");
定義されている文字列で定義することも、
img.fadeIn(3000);
ミリ秒単位の数値でも指定できます。数値の方が便利です。引数を省略できますが、表示/非表示が即実行されますので、これは無意味です。