jQuery.animate.hover.stop not working_Jquery_Hover_Mouseover_Ticker

jQuery.animate.hover.stop not working

jquery

jQuery.animate.hover.stop not working,jquery,hover,mouseover,ticker,Jquery,Hover,Mouseover,Ticker,我试图让我的股票停止时，用户悬停在它，然后重新开始时，它没有被悬停 $(function() { var ticker = function() { $('#Youtube .socialist:first').hover(function() { $("#Youtube .socialist:first").stop(); }); setTimeout(function(){ $('#Y

我试图让我的股票停止时，用户悬停在它，然后重新开始时，它没有被悬停

$(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();
});

如果我将鼠标悬停在上面作为动画，上面的代码会停止它，但其他时间不会。它也不会继续停止动画，就像我在第一次停止后停留在悬停状态一样，它会在下次超时时再次开始

我怎样才能使它在悬停时停止滴答，而在未悬停时重新开始

编辑：添加CSS&HTML+新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>
<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>

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;
}

HTML:

$(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>
<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>

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;
}

这就是你想要的：

$(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);
}

谢谢你的回答，但这对我不起作用。代码需要放在or中吗？那么，你打算把javascript放在哪里？我刚刚再次编辑，将

hover

处理程序和初始的

goTicker（）

调用放在匿名jQuery-DOMready脚本中。

ticker

var和

goTicker（）

函数在外部声明（如果愿意，可以全局声明）。我将代码放入一个外部.js文件中，并在文档的内部调用该文件。我已经试过你的新代码，但仍然不起作用。你想让我提供一些html和css吗？提供代码和/或检查浏览器的开发控制台是否有错误。我已将代码添加到问题中，并使用firebug检查了该网站，得到了一些相关信息

403.ms jquery-1.9.1.js（第8526行）

TypeError:（中间值）（…）（…）不是函数jquery.socialistic.min.js