嗨jQuery的悬停（鼠标悬停）工程，但悬停（鼠标移除）功能不会加载

嗨，这是我的第一个合法的问题为stackoverflow，原谅我，如果我搞砸了一些社会政策。我正在Jquery上工作，并且正在使用这些插件。嗨jQuery的悬停（鼠标悬停）工程，但悬停（鼠标移除）功能不会加载

<script src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.color-2.1.0.min.js"></script>

使代码工作的这一部分：

$(document).ready(function() { 
    var timeout; 
    $('.twitter').hover(

    function() { 
     timeout = setTimeout(

     function() { 
      $('body').animate({ 
       "background-color": "#dd4b39" 
      }, 400); 
     }, 

     function() { 
      $('body').animate({ 
       "background-color": "#000000" 
      }, 400); 
      clearTimeout(timeout); 
     }); 
    }); 
});

Here's a JSFiddle

的代码将激活悬停效果，改变div来软的红色，但它不会改变当您将鼠标移出div时，div会变为纯黑色。这个网上的大多数例子都表明了一种非常相似的方法，所以我很好奇我在哪里弄脏了这件事。

编辑13年8月27日18:28 EST

我想历史是必要的，我原来的代码是一个非常简单的功能，但它有生命的功能队列的建筑物的问题在移动到下一个动画之前。

Here's an example（移动你的鼠标在两个div之间快速）

$(document).ready(function(){ 
    $('.twitter').hover(
     function() {$('body').animate({"background-color":"#00aced"}, 400);}, 
     function() {$('body').animate({"background-color":"#232323"}, 400);} 
    ); 
    $('.facebook').hover(
     function() {$('body').animate({"background-color":"#3b5998"}, 400);}, 
     function() {$('body').animate({"background-color":"#232323"}, 400);} 
    ); 
});

我以为我已经正确地构建了超时功能，如果你开始一个新的悬停功能，将停止以前的悬停功能的动画，防止建立动画。

来源

2013-08-27 JosephMCasey

你的代码是很奇怪的，什么是你想用setTimeout的呢？为什么你的鼠标不工作？是因为你没有给鼠标悬停功能。 – putvande

当您提供小提琴时，请确保包含所需的库，以下是jQuery和jQuery UI库的更新小提琴http://jsfiddle.net/LBBja/2/也是我之前的评论，为什么您需要tiemout ？ –

感谢@koala_dev，我从来没有要求过帮助，所以整个JSFiddle对我来说都是新手。注意未来。 – JosephMCasey

要停止建立动画队列，你需要做的就是调用stop()调用animate()前：

$('.twitter').hover(
    function() {$('body').stop().animate({"background-color":"#00aced"}, 400);}, 
    function() {$('body').stop().animate({"background-color":"#232323"}, 400);} 
);

Updated fiddle

来源

2013-08-27 22:59:37

:(我会花这么长时间在一个愚蠢的问题;天啊，它总是这么简单。谢谢你回答@koala_dev。 – JosephMCasey

不太确定你想要在setTimeout那里做什么，但是处于错误的位置。 hover接受两个功能，一个mouseover和一个mouseout。所以它应该是上线：$('body').delay(1000).animate(....

上hover欲了解更多信息：

$(document).ready(function() { 
    $('.twitter').hover(
     function() { 
      $('body').animate({ 
       "background-color": "#dd4b39" 
      }, 400); 
     }, 

     function() { 
      $('body').animate({ 
       "background-color": "#000000" 
      }, 400); 
     } 
    ); 
});

如果你想与setTimeout做的是创造一个延迟，您可以在animate功能前添加delay： http://api.jquery.com/hover/

来源

2013-08-27 22:04:49 putvande

感谢putvande建立我错误地格式化了原来的那个（我害怕那是问题），这是我的原始代码;我希望能够修复功能的构建。 – JosephMCasey

这是否解决了您的问题？如果是这样，你可以好好接受它。 – putvande

它没有解决我的问题。这个延迟使得堆积问题变得更糟。我很抱歉没有尽早做到这一点。 – JosephMCasey

嗨jQuery的悬停（鼠标悬停）工程，但悬停（鼠标移除）功能不会加载

回答

相关问题