Jquery 代码可以在 JsFiddle 上运行,但不再可以在我的电脑上运行

发布于 2024-12-29 17:07:45 字数 1082 浏览 0 评论 0原文

我遇到了一个小问题,并且厌倦了尝试解决它。 jQuery 缓动代码在 jsfiddle 上完美运行,但在本地主机上的测试服务器上不再运行。当我删除 jQuery 缓动效果时,一切恢复正常并且代码工作正常...

我想知道代码是否有问题?这是与 OnLoad 函数有关的东西还是什么...!!

<head>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" ></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  jQuery(function($) {
    $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
           a.stop().animate({marginTop: '-64'}, 600, "easeOutBack");
        },
        function() {
           a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
        })
       .append(div);
   });
});

这是JSFiddle 代码

I have a little problem and got tired of trying to solve it. The jQuery easing code works perfectly on jsfiddle, but doesn't work on my testing server on the localhost anymore. When I remove the jQuery easing effect, things go back to normal and the code works fine...

I'm wondering is there something wrong with the code? Is that something related to OnLoad function or something...!!

<head>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" ></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  jQuery(function($) {
    $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
           a.stop().animate({marginTop: '-64'}, 600, "easeOutBack");
        },
        function() {
           a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
        })
       .append(div);
   });
});

Here is the JSFiddle code.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

揽月 2025-01-05 17:07:45

试试这个,你包含 javascript 的顺序不正确。

<head>
 <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
 <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" ></script>
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">
   $(document).ready(function(){
      $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
        a.stop().animate({marginTop: '-64'}, 600, "easeOutBack");
      },
      function() {
        a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
      })
      .append(div);
    });
  });
 </script>
</head>

我已经在本地进行了测试,(请参阅屏幕截图)

在此处输入图像描述

希望它适合您。

Try this, your sequence of including javascript was incorrect.

<head>
 <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
 <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript" ></script>
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">
   $(document).ready(function(){
      $('.topnav li').find('a[href]').parent().each(function() {
        var li = $(this),
        a = li.find('a'),
        div = $('<div>' + '<\/div>');

        li.hover(function() {
        a.stop().animate({marginTop: '-64'}, 600, "easeOutBack");
      },
      function() {
        a.stop().animate({marginTop: '0'}, 500, "easeOutBack");
      })
      .append(div);
    });
  });
 </script>
</head>

I have tested locally, (see the screen shot)

enter image description here

Hope it works for you.

手长情犹 2025-01-05 17:07:45

抱歉,我还不能发表评论,所以...

看看 ianace 说了什么。

看看你的 script 标签后面是否没有包含 jquery script 标签。您的代码脚本必须在依赖项之后加载,如下所示:

<script src="jquery.js> </script>
<script src="yours.js"> </script>

Sorry, I can't comment yet so...

See what ianace said.

Look if you didn't included jquery script tag after your script tag. Your code script has to be loaded after the dependencies, like this:

<script src="jquery.js> </script>
<script src="yours.js"> </script>
世界如花海般美丽 2025-01-05 17:07:45

希望这会有所帮助:

您可以使用 google 代替 jquery file.js,如果需要也可以使用 jquery-ui。
这更加动态,您可以更改要使用的版本。

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("jquery", "1.7.1");
        //google.load("jqueryui", "1.7.3");
    </script>

之后,将你的 js 与 jquery 函数(你在 jsFiddle 中获得的代码)放在一起:

<script src="scripts/functions.js" type="text/javascript"></script>

它应该可以工作。

Hope this helps:

Instead of using jquery file.js you can use google for that and also jquery-ui if needed.
This is more dynamic and you can change the version to be used.

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("jquery", "1.7.1");
        //google.load("jqueryui", "1.7.3");
    </script>

After that, put your js with jquery functions (the code you got in jsFiddle):

<script src="scripts/functions.js" type="text/javascript"></script>

And it is supposed to work.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文