studio-benkei

jqueryを使ったフェイドイン、フェイドアウト

JavaScript ▼

            //最初に非表示
            window.onload = function (){
              para1 = document.getElementById('spead');
              para1.style.display = 'none';
            }
            
            //フェイドイン
            function showTag(){
            $("#spead").fadeIn("slow");
            }
            
            //フェイドアウト
            function hideTag(){
            $("#spead").fadeOut("slow");
            }
            
            
            //表示、非表示
            function toggleTag(){
            $("#spead").toggle();
            }

          

HTML ▼

            <ul>
              <li><input type="button" value="フェイドイン" onClick="showTag()"></li>
              <li><input type="button" value="フェイドアウト" onClick="hideTag()"></li>
              <li><input type="button" value="表示非表示" onClick="toggleTag()"></li>
            </ul>
            <ul id="spead">
              <li><a href="#"><img src="002.jpg" width="150" height="125" alt="" /></a></li>
              <li><a href="#"><img src="003.jpg" width="150" height="125" alt="" /></a></li>
              <li><a href="#"><img src="004.jpg" width="150" height="125" alt="" /></a></li>
              <li><a href="#"><img src="005.jpg" width="150" height="125" alt="" /></a></li>
              <li><a href="#"><img src="006.jpg" width="150" height="125" alt="" /></a></li>
              <li><a href="#"><img src="007.jpg" width="150" height="125" alt="" /></a></li>
              <li><a href="#"><img src="008.jpg" width="150" height="125" alt="" /></a></li>
            </ul>