Javascript/jQuery：为网站上的页脚徽标创建“Powered By”幻灯片

Question

我找到了一个 jsfiddle，它做了一些类似于我想做的事情。修改后的版本位于：http://jsfiddle.net/7m7uK/479/，它适用于 jsfiddle。我将代码复制到我的网站，更改了 ID，现在它似乎无法正常工作。以下是位于我网站上的代码。我在我的网站上使用 jQuery 1.9.1 和 jQuery UI 1.10.3。关于为什么这不起作用的任何建议？

Javascript

<script type="text/javascript">
$( document ).ready(function() {
    $('#footer_logo').hover(function(){
        if ($('#powered_by').is(':hidden')) {
            $('#powered_by').show('slide',{direction:'right'},1000);
       } else {
            $('#powered_by').hide('slide',{direction:'right'},1000);
       }
    });
});
</script>

HTML

  <img src="img.png" width="63" height="25" id="footer_logo"/>
  <div id="powered_by" width="100px"/>Powered By: </div>

CSS

#footer_logo {
    color: #000;
    cursor:pointer;
    display:block;
    position: absolute;
    bottom: 0; right: 0;
    z-index: 100;
}

#powered_by {
    width: 200px;
    height: 20px;
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #ff0000;
    z-index: 99;
}

Answer 1

我在jsfiddle 上尝试了您的代码，并且运行良好。如果问题仍然存在，请查看此 SO 帖子：JQuery UI show/slide not working correctly，也许他们的解决方案可以提供帮助。

您想在悬停时显示#powered_by，然后在悬停时隐藏它，对吗？

我查看了您的代码，但它并不是您希望它正确表现的方式。例如，如果您将鼠标悬停，元素会滑动，但是当您将鼠标悬停然后再次悬停而不让它完成隐藏时，悬停执行将被反转。

这样做会更有效率：

$(document).ready(function() {
$('#footer_logo').hover(function(){
    //hover-in 
    $('#powered_by').show('slide',{direction:'right'},1000);
},function(){
    //hover-out 
    $('#powered_by').hide('slide',{direction:'right'},1000);
});
});

看到这个jsfiddle。

或者使用纯 jQuery：jsfiddle