Question

所以我一直在为我的网站开发一个新的博客系统，我最终希望将其打包为免费下载。我有动态阅读更多/更少的链接，在IE和Firefox中完美运行，但不是Chrome;该列表中的最后一个浏览器显示没有fadeIn效果的条目，不会隐藏摘要范围并忽略read less链接。

以下是我的代码。我正在使用jQuery 1.7.0。提前谢谢，任何能给我正确答案的人都会在我的博客中得到一个mentiogn。感谢您的帮助:)

<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

只是为了让你知道，我解决了这个问题。出于某种原因，在发布此答案时发布的所有版本的Google Chrome（我的版本为18.0.1025.162）都不支持jQuery更改的<span>元素的可见性（未尝试使用手动JavaScript，但是，也许这是一种可能性。）

很简单，我用<span> s替换了包含博客条目数据的<div>元素。问题解决了。

如果您感兴趣，可以找到该博客here。我将对其进行进一步改进，并希望最终作为开源免费发布该软件。

Answer 2

我不确定这是否是问题，但根据documentation fadeOut()将duration作为第一个参数，将回调作为第二个参数。

尝试将持续时间作为第一个参数 - 例如“慢”，“快”或400（毫秒数），并将回调函数作为第二个参数传递。

像这样：

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

动态阅读更多链接无法在Chrome中使用

2 个答案: