0

我试图让我的代码在用户悬停在它上面时停止，然后在它没有被悬停时重新开始。

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

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

1 回答 1

1

这就是你想要的：

$(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);
}
于 2013-04-18T23:23:58.707 回答