Question

在过去一小时左右，我已经查看过我的问题的其他相关帖子，并为他们尝试了各种修复，但它仍然不起作用，所以在这里：

我有一个网站，位于www.rooms101.com我的客户希望我添加页面剥离效果，所以我使用http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/中的一个示例，我已经直接复制了代码和图像网站测试它，但由于某种原因它不起作用。

jQuery代码：

<script type="text/javascript">
    $('#pageflip').hover(function() { //On hover...
        $("#pageflip img , .msg_block").stop()
            .animate({ //Animate and expand the image and the msg_block (Width + height)
                width: '307px',
                height: '319px'
            }, 500);
    },
    function() {
        $("#pageflip img").stop() //On hover out, go back to original size 50x52
            .animate({
                width: '50px',
                height: '52px'
            }, 220);
        $(".msg_block").stop() //On hover out, go back to original size 50x50
            .animate({
                width: '50px',
                height: '50px'
            }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
    });
</script>

HTML（包含在body标签内和页面包装器上方）：

<div id="pageflip">
    <a id="pageflip-a" href="#">
        <img src="http://Rooms101.com/page-peel/page_flip.png" alt="" />
        <span class="msg_block">Layaway Your Vacation Today</span>
    </a>
</div>

我还尝试了在悬停时更改div颜色的简单效果，可以在页面左下方的绿色框中找到，也不起作用... HTML：

<div class="box" style="width: 20px; height: 20px; background-color: green;"></div>

jQuery的：

$(document).ready(function() {
    $('.box').hover(function() {
            $(this).css({ background: 'blue' });
        },
        function() {
            $(this).css({ background: 'black' });
        });
});

在此先感谢您的帮助，这个问题让我感到非常困惑。

编辑：我继续在我的个人网站上尝试使用完全相同的代码，并且基本上没有任何意外它的功能应该......我必须说我真的很讨厌继承懒惰设计师的糟糕代码......

不幸的是，他们并不了解他们的代码有多糟糕......所以，如果有人能够提供一个原因，说明为什么这个功能不起作用，并暂时修复“hack”，那将是值得赞赏的。

Answer 1

Firefox和Firebug以及谷歌Chrome开发工具都指出了两个JS错误......第一个出现在第99行似乎是你的代码

missing } after function body  

    bit faster (to prevent glitching in IE)});

另一个是在486上，它表示没有定义writeObjects。

Answer 2

啊，我不是故意粗鲁。但是你甚至在你选择的浏览器中检查错误控制台了吗？有一个javascript错误（实际上是2），如果你查看源代码也很明显为什么。

用于此页面效果的jQuery javascript代码（rooms101.com）如下所示

<script type="text/javascript">$('#pageflip').hover(function() { //On hover...  $("#pageflip img , .msg_block").stop()      .animate({ //Animate and expand the image and the msg_block (Width + height)            width: '307px',         height: '319px'     }, 500);    } , function() {    $("#pageflip img").stop() //On hover out, go back to original size 50x52        .animate({          width: '50px',          height: '52px'      }, 220);    $(".msg_block").stop() //On hover out, go back to original size 50x50       .animate({          width: '50px',          height: '50px'      }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)});</script>

糟糕。一个oneliner。

之后当然无法正常运行

$('#pageflip').hover(function() { //On hover...

被注释掉了。您的整个代码都是评论。

所以要么以一种方式更改jQuery代码，当它放在一行时（删除所有注释，也许还有一些其他调整）或者让你的“网页”输出包含换行符的javascript。

jQuery Hover - UnHover无法运行

2 个答案: