動態閱讀更多鏈接無法在Chrome中工作

Question

因此，我一直在爲我的網站開發一個新的博客系統，我最終希望將其作爲免費下載進行打包。我有動態閱讀更多/更少的鏈接，在IE和Firefox中完美工作，但不是Chrome;該列表中的最後一個瀏覽器將顯示沒有淡入效果的條目，不會隱藏彙總範圍並忽略讀取較少的鏈接。

以下是我的代碼。我正在使用jQuery 1.7.0。預先感謝您，任何能夠給我正確答案的人都會在我的博客中獲得一個認證。我感謝你的幫助:)

<script type="text/javascript"> 
function readMore(entNo) 
{ 
    $("#entSum" + entNo).fadeOut(function() 
    { 
     $("#ent" + entNo).fadeIn(); 
    }); 

function readLess(entNo) 
{ 
    $("#ent" + entNo).fadeOut(function() 
    { 
     $("#entSum" + entNo).fadeIn(); 
    }); 
} 

function loadPage(startNo,endNo) 
{ 
    $("#blogLoad").fadeOut(function() 
    { 
      $.ajax(
      { 
       url: "getBlog.php", 
       type: "GET", 
       data: {start: startNo, end: endNo}, 
       success: function(data) 
       { 
        $("#blogLoad").html(data); 
        $(".ent").hide(); 
        $("#blogLoad").fadeIn(); 
       } 
      }); 
    }); 
} 

function facebookShare(id) 
{ 
    window.open("http://www.facebook.com/sharer.php?u=http://jamesswright.co.uk/blog.php?id=" + id + "&t=James S. Wright| Blog", "ShareOnFacebook", "width=600,height=400,scrollbars=yes,location=no,status=no,screenx=" + ((screen.width/2) - 300) + ",screeny=" + ((screen.height/2) - 200)); 

} 

function twitterShare(id) 
{ 
    window.open("http://twitter.com/share?url=http://jamesswright.co.uk/blog.php?id=" + id + "&text=Cool blog from James Wright: &via=JamesSWrightWeb", "Twitter", "width=600,height=400,scrollbars=yes, location=no, status=no, screenx=" + ((screen.width/2) - 300) + ", screeny=" + ((screen.height/2) - 200)); 

} 
</script> 
<?php 

$start; 
$end; 

if($_GET["start"] == NULL) $start = 0; 
else $start = $_GET["start"]; 

if($_GET["end"] == NULL) $end = 5; 
else $end = $_GET["end"]; 


$connection = mysql_connect("localhost", "jamwri9_sql", "******"); 
if(!$connection) echo "<p><b>Could not retrieve banner data: database connection failed"; 

mysql_select_db("jamwri9_sql", $connection); 

$query; 
$totalRows; 
if($_GET["id"] == NULL) 
{ 
    $query = mysql_query("SELECT ID, Title, Date, Entry FROM jswBlog ORDER BY ID DESC LIMIT " . $start . ", " . $end); 
    $totalRows = mysql_num_rows(mysql_query("SELECT ID FROM jswBlog")); 
} 
else $query = mysql_query("SELECT Title, Date, Entry FROM jswBlog WHERE ID = " . $_GET["id"] . " ORDER BY ID"); 

$rows = mysql_num_rows($query); 


$i = 0; 
for($i; $i < $rows; $i++) 
{ 
    echo "<p class=\"title\">". mysql_result($query, $i, 'Title') . "</p><p>Posted " . mysql_result($query, $i, 'Date') . "</p>"; 
    if(strlen(mysql_result($query, $i, 'Entry')) > 250 && $_GET["id"] == NULL) echo "<span id=\"entSum" . $i . "\"><p>" . substr(mysql_result($query, $i, 'Entry'), 0, 250) . "... | <a href=\"javascript:void(0)\" onclick=\"readMore(" . $i . ")\">read more >></a></p></span><span id=\"ent" . $i . "\" class=\"ent\"><p>" . mysql_result($query, $i, 'Entry') . " | <a href=\"javascript:void(0)\" onclick=\"readLess(" . $i . ")\"><< read less</a></p></span>"; 
    else echo "<p>" . mysql_result($query, $i, 'Entry') . "</p>"; 
    echo "<p>Share: <a href=\"javascript:void(0)\" onclick=\"facebookShare(" . mysql_result($query, $i, 'ID') . ")\"><img src=\"img/facebook.png\" style=\"vertical-align: middle;\" /></a> <a href=\"javascript:void(0)\" onclick=\"twitterShare(" . mysql_result($query, $i, 'ID') . ")\"><img src=\"img/twitter.png\" style=\"vertical-align: middle;\" /></a> <input type\"text\" value=\"http://jamesswright.co.uk/blog.php?id=" . mysql_result($query, $i, 'ID') . "\" /></p><hr />"; 
} 

if($_GET["id"] == NULL) 
{ 
    echo "<p>Page: "; 
    $pages = $totalRows/5; 
    $j = 0; 
    $startNo = 0; 
    $endNo = 5; 
    for($j; $j < $pages; $j++) 
    { 
     echo "<a href=\"javascript:void(0)\" onclick=\"loadPage(" . $startNo . "," . $endNo . ")\">" . ($j + 1) . "</a>"; 
     if($j < $pages - 1) echo "|"; 
     $startNo += 5; 
     $endNo += 5; 
    } 
    echo "</p>"; 
} 
else echo "<a href=\"blog.php\">View all blog entries</a>"; 
?> 

Answer 1

只是爲了讓你知道，我解決了這個問題。出於某種原因，在發佈此答案時發佈的所有谷歌瀏覽器版本（我的版本爲18.0.1025.162）都不支持被jQuery修改的元素的可見性（不嘗試使用手動JavaScript，不過也許這是一種可能性）。

很簡單，我用<div> s替換了包含博客條目數據的<span>元素。問題解決了。

萬一你有興趣，博客可以找到here。我將對其進行進一步改進，並希望最終以開放源代碼的形式免費發佈軟件。

Answer 2

我不知道這是否是問題，但根據documentation​​需要duration作爲第一個參數，和一個回調作爲第二個參數。

嘗試將持續時間作爲第一個參數 - 比如「慢」，「快」或400（毫秒數），並將回調函數作爲第二個參數傳遞。

像這樣：

function readMore(entNo) 
{ 
    $("#entSum" + entNo).fadeOut("fast", function() 
    { 
     $("#ent" + entNo).fadeIn("fast"); 
    }); 
}