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

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

1 个答案: