jQuery .animate.hover.stop not working

Question

I am trying to make my ticker stop when the user hovers over it and then start again when it is not being hovered over.

$(function() {
    var ticker = function() {

        $('#Youtube .socialist:first').hover(function() {
            $("#Youtube .socialist:first").stop();
        });

        setTimeout(function(){
            $('#Youtube .socialist:first').animate( {marginTop: '-230px'}, 800, function()
            {
                $(this).detach().appendTo('#Youtube').removeAttr('style');
            });
            ticker();
        }, 5000);
    };
    ticker();
});

The code above stops it if i hover over it as its animating but at no other time. It also doesn't continue to stop the animation as if i stay hovered after the first stop it starts again on the next time out.

How can i make it stop ticking over when hovered over and start again when not being hovered over?

EDIT : Added CSS & HTML + New JS

JS:

$(function() {
  $('#Youtube').on('hover', '.socialist:first', function() {
    clearTimeout(ticker);
  }, goTicker);

  goTicker();
});

var ticker; 

function goTicker() {
  ticker = setTimeout(function() {
    $('#Youtube .socialist:first').animate( {marginTop: '-230px'}, 800, function() {
      $(this).appendTo('#Youtube').removeAttr('style');
      goTicker();
    });
  }, 5000);
}

HTML:

<html>
<head>

    <title>Consept</title>


<!-- JQuery --->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<!-- App Resorces --->
    <link href="stylesheets/jquery.socialist.css" rel="stylesheet" />
    <script src='javascript/jquery.socialist.min.js'></script>

<!-- Main Scripts --->
    <script type="text/javascript" src="javascript/scripts.js"></script>

<!-- Main Styles --->
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />

</head>
<body>
    <section id="AppBox">
        <div class="AppList">
            <div id="Youtube" class="App Note">
            </div> <!-- Youtube -->
        </div>
    </section>
</body>
</html>

CSS:

body {
    margin:0;
    background-position:50% 50%;
    background-image:url('http://oracle/tests/newdesign/images/BG.jpg');
}
#AppBox{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0;
}
.AppList {
    position:absolute;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.App {
    position:absolute;
    display:block;
    margin:5px;
    padding:0;
    box-shadow:0 0 5px 1px black;
    color:#FFFFFF;
    cursor:move;
}
#Youtube {
    overflow:hidden;
    background:linear-gradient(to bottom, #AF2B26 0px, #942422 100%) repeat scroll 0 0 #AF2B26;
}
.Note {
    height:230px;
    width:230px;
}

Rodney G · Answer 1 · 2013-04-19T13:57:47.827

1

This is what you want:

$(function() {
  $('#Youtube').on('hover', '.socialist:first', function() {
    clearTimeout(ticker);
  }, goTicker);

  goTicker();
});

var ticker; 

function goTicker() {
  ticker = setTimeout(function() {
    $('#Youtube .socialist:first').animate( {marginTop: '-230px'}, 800, function() {
      $(this).appendTo('#Youtube').removeAttr('style');
      goTicker();
    });
  }, 5000);
}

edited Apr 19 '13 at 13:57

answered Apr 18 '13 at 23:23

Rodney G

4,746
1
16
15

Thanks for the answer but this isn't working for me. does the code need to be in the or ? – ChristopherStrydom Apr 19 '13 at 06:36
Well, where were you *planning* to put your javascript? I just edited again to put the `hover` handler and the initial `goTicker()` call inside the anonymous jQuery DOMready script. The `ticker` var and `goTicker()` function are declared outside (globally, if you will). – Rodney G Apr 19 '13 at 14:03
i am putting the code in an external .js file which i call inside the of the document. I have tried your new code and it still isn't working. Would you like me to supply some of the html and css? – ChristopherStrydom Apr 19 '13 at 14:26
Provide code and/or check your browser's dev console for errors. – Rodney G Apr 19 '13 at 14:29
i have added the code to the question and i checked the site with firebug and got this with some stuff before it. `403 Forbidden 84ms jquery-1.9.1.js (line 8526)` + `TypeError: (intermediate value)(...)(...) is not a function jquery.socialist.min.js` – ChristopherStrydom Apr 19 '13 at 14:38
i am going to download a different version of Wampserver as i think the 403 error has something to do with Apache V2.4.2 and their might be some conflict with the socialist app – ChristopherStrydom Apr 19 '13 at 14:42
i definitely think there is a conflict with socialist and jquery. Maybe that is causing the problem here :/ i am using socialist to get my data though – ChristopherStrydom Apr 19 '13 at 14:54
I think the 403 is the response from an ajax call, probably being made by the socialist plugin. Line 8526 of jquery source is `xhr.send( ( s.hasContent && s.data ) || null );`. What address is it trying to hit? Try hitting that URL in a browser. – Rodney G Apr 19 '13 at 14:56
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/28516/discussion-between-christopherstrydom-and-rodney-golpe) – ChristopherStrydom Apr 19 '13 at 15:01
@ChristopherStrydom If you're still getting the _TypeError: (intermediate value)(...) is not a function_ error, have a look at your [generated] JavaScript to see if you're missing a `;` somewhere. – WynandB Oct 09 '13 at 05:07

jQuery .animate.hover.stop not working

1 Answers1