기본 애니메이션.hide() .show() .stop()

1713 단어



    
        
        
        <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
        <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"/>
        <script type="text/javascript">
</code></pre> 
 <pre><code>        $(function() {
</code></pre> 
 <h4> ,  hide();</h4> 
 <pre><code>            $('button').click(function() {
</code></pre> 
 <h4> : 、  、opacity   、    0   display = none</h4> 
 <h4>//hide   ("slow","normal", or "fast");</h4> 
 <pre><code>                /*$('div').hide(1000);       
                //  
                $('div').show(1000);*/       

                if($('#div1').css('display') == 'none') {
</code></pre> 
 <h4>//  .stop()</h4> 
 <pre><code>                    //$('#div1').stop( , );
                    //$('#div1').stop();
                    $('#div1').show(1000);
                } else {
                    //$('#div1').stop();
                    $('#div1').hide(1000);
                }
            })

        })
    </script>



    <button> </button>
    <div id="div1"> </div>

</code></pre> 
  
</article>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기