我期待隱藏.ready上的元素，並用動畫顯示它們onclick

Question

我期待隱藏.ready上的元素，並用動畫onclick顯示它們。我試圖這樣做

$(document).ready(function() { 
    $('.bio').hide(); 
}); 

$('.anotherdiv).onclick(function() { 
    $('.bio').show(2000).animate({ left:'15em' }, 2500); 
]); 

我知道我可能會離開。

Answer 1

有幾個問題。

• onclick應該只是click
• 單擊處理需要是document.ready塊內，使其執行一次的DOM已經intitialised。
• 有一個在.anotherdiv選擇
• ]失蹤'應在單擊處理程序的關閉

另外請注意，你應該使用CSS來隱藏元素開始，這樣你就不會得到}頁面加載時的FOUC（未格式化內容的閃光）。試試這個：

$(document).ready(function() { 
 
    $('.anotherdiv').click(function() { 
 
    $('.bio').show(2000).animate({ 
 
     left: '15em' 
 
    }, 2500); 
 
    }); 
 
});

.bio { 
 
    display: none; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="anotherdiv">Another DIV</div> 
 
<div class="bio">BIO</div>

以供將來參考調試JS代碼，當你要經常檢查控制檯。你會看到語法問題的報告。

Answer 2

默認情況下，爲什麼不隱藏元素（不透明度爲0），然後添加一個單擊事件以在文檔準備就緒時顯示它，此時可以將不透明度更改爲1？

$(document).ready(function() { 
    $('.anotherdiv').click(function() { 
     $('.bio').animate({ 
     left: '15em', 
     opacity: 1 
     }, 2500) 
    }); 
});