我想做一個閱讀更多按鈕，但我剛開始使用javascript/jquery

Question

我想做一個閱讀更多按鈕，這將擴大網頁和文本將出現一個很好的動畫。我試圖做一個jQuery代碼，但我意識到它不會工作，我刪除它。如果文本大於200個字符，將出現Read More按鈕。我只有一些基本的東西，如this。

Javascript代碼：

$("#clickme").click(function() { 
$("#hidden").show(); 
}); 

Answer 1

所以基本上你需要寫一個邏輯，如： 1：檢查字符串的長度，如果您使用的PHP然後登錄可能是如下所示：

<?php $str = "I am in love with PHP"; 
if(strlen($str) > 10) 
{ 
    $showten = substr($str, 0, 10); 
echo $showten . "<a href="#" class='readmore'>Readmore</a>"; 
} 
?> 



<div class="all-content"><?php echo $str; ?></div> 

現在到了Jquery的付諸行動：

<script> 
$(document).ready(function() 
{ 
$('.readmore').click(function() 
{ 
    $(this).closest("div").find(".all-content").toggle(); 
}); 
}); 
</script> 

這是一個示例代碼，你需要做輕微modifcations按您的要求！

Answer 2

嘗試使用此：

$("#clickme").click(function() { 
    $("#hidden").fadeIn("slow"); 
}); 

Answer 3

您可以用很多jQuery的功能，如show(),fadeIn(),slideDown(),animate()你甚至可以使用CSS轉換

Answer 4

你可以在這裏找到不同的jquery動畫。

http://api.jquery.com/animate/ 

Answer 5

請試試這個：

$("#clickme").click(function() { 
    $("#hidden").fadeIn("slow"); 
});