jQuery .animate.hover.stop не работает

Я пытаюсь остановить мой тикер, когда пользователь нависает над ним, а затем запускается снова, когда он не зависнет.jQuery .animate.hover.stop не работает

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

Приведенный выше код останавливает его, если я навешиваю на него его анимацию, но ни в какое другое время. Он также не продолжает останавливать анимацию, как если бы я оставался нависшим после первой остановки, когда он снова начинается в следующий раз.

Как я могу сделать это остановкой , тикающий над, когда завис над и начнется снова, когда не завис?

EDIT: Добавлен 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; 
}

источник

2013-04-18 ChristopherStrydom

Это то, что вы хотите:

$(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-18 23:23:58

Спасибо за ответ, но это не работает для меня. должен ли код быть в или ? – ChristopherStrydom

Ну, где вы * планировали * поставить свой javascript? Я только что отредактировал снова, чтобы поместить обработчик 'hover' и начальный' goTicker() 'вызов внутри сценария анонимного jQuery DOMready. Функция 'ticker' var и' goTicker() 'объявляется вне (глобально, если хотите). –

Я помещаю код во внешний .js-файл, который я вызываю внутри документа. Я пробовал ваш новый код, и он все еще не работает. Вы хотите, чтобы я предоставил некоторые html и css? – ChristopherStrydom

ответ

Смежные вопросы