Question

我目前正在使用jQuery构建自己的网站。而我正试图让图像在悬停时动摇。我总是在＆＃34;测试表＆＃34;中尝试这样的效果。在我将它们应用到我的网站之前。在测试表中一切正常，但在主表中没有。

testsheet：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TEST</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <style>
        #toggle {
width: 100px;
height: 100px;
background: #ccc;
}
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
    <p>Hover above the picture</p>
    <img src="pfeil.png" id="toggle">
    <script>
    $(function(){
        $( "#toggle" ).hover(function() {
            $( "#toggle" ).effect( "shake" );
        });
    });
    </script>
</body>

主要表单HTML：

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JG</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="FINALCSS.css" media="screen"></link>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>

<div id="PAGE1" class="container-fluid">
        <div id="backgroundDiv1"></div>
        <div id="backgroundDiv2"></div>
        <div id="backgroundDiv3"></div>
        <div style="height:100%" class="row">
            <div id="reihe1"class="col-md-3"></div>
            <div id="reihe2" class="col-md-3"></div>
            <div id="reihe3"class="col-md-6">
                <div id="googleDiv" data-toggle="tooltip" data-placement="left" title="google+"><img id="googleplus" src="google+.png"></div>
                <div id="titel">
                    <p>*******</p>
                    <p>*******</p>
                    <p id="designer">*********</p>
                        <img  src="pfeil.png" id="pfeil">
                </div>
            </div>
        </div>
    </div>

主要表格CSS：

#pfeil{
    text-align: center;
    width:120px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 250px
}
#reihe3{
background-color: white;
height: 100%;
}

主要表格JS：

$(function(){
        $( "#pfeil" ).hover(function() {
            $( "#toggle" ).effect( "shake" );
        });
    });

Answer 1

以下是基于您的代码的内容：

$(function(){
    $( "#pfeil" ).hover(function() {
        $( "#pfeil" ).effect( "shake" );
    });
});

Answer 2

$( "#pfeil" ).hover(function() {
        $( "#toggle" ).effect( "shake" );
    });

主页HTML中的切换ID在哪里？

Answer 3

我认为在script之前，您的MAIN html文件中缺少此</head>标记：

 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

您可能还需要指向main.js（<script src="main.js"></script>）的链接，或者需要在关闭正文之前提供代码，就像测试时一样：

html标记： <img src="pfeil.png" id="toggle">

...
<script>
$(function(){
    $( "#toggle" ).hover(function() {
        $( "#toggle" ).effect( "shake" );
    });
});
</script>
</body>

希望有所帮助！如果我这样做，请将此问题标记为有用或正确！谢谢，祝你好运。

任何人都可以告诉我为什么其中一个例子有用而另一个没有？

3 个答案: