Jquery code works on JsFiddle, but not on my computer anymore

Question

Jquery code works on JsFiddle, but not on my computer anymore

896 views Asked by Digital site At 01 November 2024 at 18:45

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.

Original Q&A

There are 3 answers

Bengineer On 31 January 2012 at 07:03

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>

Oscar Jara On 31 January 2012 at 07:11

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.

**Amar Palsapure** · Accepted Answer · 2012-01-31 09:22:22

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.

TechQA.

Jquery code works on JsFiddle, but not on my computer anymore

There are 3 answers

Related Questions in JQUERY

Related Questions in JQUERY-PLUGINS

Related Questions in JQUERY-EASING

Popular Questions

Popular Tags

Trending Questions