jquery動畫篇1-3, #a1設置display: none !important,然后再 $("#a1").css('display', 'block !important'); $("#a1").show(3000); }); 為什么動畫不能顯示
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? .left div,
? ? .right div {
? ? ? ? width: 500px;
? ? ? ? height: 50px;
? ? ? ? padding: 5px;
? ? ? ? margin: 5px;
? ? ? ? float: left;
? ? ? ? border: 1px solid #ccc;
? ? ? ?
? ? }
? ??
? ? .left div {
? ? ? ? background: #bbffaa;
? ? }
? ??
? ? .right div {
? ? ? ? background: yellow;
? ? }
? ??
? ? #a1{display:none !important;}
? ? </style>
? ? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
? ? <h2>hide-show</h2>
? ? <div class="left">
? ??
? ? ? ? <div id="a1">hide-show</div>
? ? ? ? <button>直接hide-show動畫</button>
? ? <script type="text/javascript">
? ? //點擊button
? ? //執行3秒隱藏
? ? //執行3秒顯示
? ? $("button").click(function() {
? ? ? ? $("#a1").css('display', 'block !important');
? ? ? ? $("#a1").show(3000);
? ? });
? ? </script>
</body>
</html>
2022-03-23
xcode6.1已經是正式版了,閃退問題應該少了很多~親,第一季的課程是視頻 代碼編輯器哦,所以第二章之后的內容是要在網站上通過代碼編輯器學習的哦
2018-03-17
http改成https
2018-01-19
?加了這個!important,show方法就不能把display來回切換了 ?需要你自己顯示 然后show方法提供動畫 從 width=0和height=0變會原來值,就是說 你需要自己用disoaly:block !important顯示出來 ?但是 顯示出來了 盒子寬高還是0 ,需要繼續動畫變會原來的值。
2017-07-03
這個問題挺無解的,教程方法二肯定錯的,我用attr('style','display:block !important')雖然樣式可以切換了,但沒有動畫效果了,show()加不加,動畫效果都一樣
2017-04-07
<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
??? <title></title>
??? <style>
??? .left div,
??? .right div {
??????? width: 500px;
??????? height: 50px;
??????? padding: 5px;
??????? margin: 5px;
??????? float: left;
??????? border: 1px solid #ccc;
??? }
???
??? .left div {
??????? background: #bbffaa;
??? }
???
??? .right div {
??????? background: yellow;
??? }
??? #ai {
??????? display:none!important;
??? }
??? </style>
??? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
??? <h2>hide-show</h2>
??? <div class="left">
???
??????? <div id="a1">hide-show</div>
??????? <button>直接hide-show動畫</button>
??? <script type="text/javascript">
??? //點擊button
??? //執行3秒隱藏
??? //執行3秒顯示
?/*?? $("button").click(function() {
??????? var flag=1;
??????? while(flag=2)
??????? {
???????????? $("#a1").hide(3000).show(3000)
??????? }
??????
??? });*/
??? $('#a1').on('mousedown mouseclick',function(){
?????? $('#a1').css('display', 'block !important');
??????? $("#a1").hide(3000).show(3000)
??? })
??? </script>
</body>
</html>
2016-11-11
if ( display === true ) {
?$( "elem" ).show();
} else if ( display === false ) {
?$( "elem" ).hide();
}