Home/ Questions/Q 7896347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T07:52:22+00:00

I’ve got a jsFiddle working how I want: http://jsfiddle.net/6wuUc/64/ But for some reason, when

  • 0

I’ve got a jsFiddle working how I want: http://jsfiddle.net/6wuUc/64/

But for some reason, when I use the exact same code, I’m not getting the animation when I click the button. Here’s the code I’m using on my page.

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<link rel="stylesheet" href="_/css/style.css">

<script src="_/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
</script>

</head>

<body>

<div id="video">
    <div class="sublime">
        <p class="sv_play_button">Click</p>
    </div>    
</div>

</body>
</html>

And the CSS:

#video, #video .sv_play_button {position: absolute;}

#video { margin-left: -346px; width: 670px; height: 546px; background-color: blue;}

.sublime { width: 1016px; height: 546px; background-color: red; opacity: 0.8; }

.sv_play_button {padding: 5px; background-color: yellow; top: 0px; right:0px; }​

Anyone got any idea why the toggle() isn’t working on my page? Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Problem

    You haven’t wrapped your jquery in a $(document).ready() which is required to run any jquery events.

    What is hapenning is that the javascript is attempting to run jquery code before jquery has even been loaded which is why you must wait until the document has loaded (with the use of .ready()).

    Your new javascript should look like this:

    $(document).ready( function() {
$('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
});

    Note: Keep in mind that all your functions must be outside of this or they will not be callable. Also remember that this wrapper is a function so global variables must be defined outside of it.

    if you don’t have it referenced already, you will need to reference jquery in your head like so:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    References

    • 0