Question

根据问题的一个例子，我尝试了下面的代码（部分内容，而不是整个代码）：

function fadeDivIn(){
    $('#helpdocButton').animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();});
}

function fadeDivOut(div){
    $('#helpdocButton').animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();});
}

$(function() {

  $('#helpdocButton').click(function(){
    $('menu').hide('slow');
    $('helpdoc').show('slow')
  });

  $('#helpdocButton').mouseover(function(){
    fadeDivIn();//it should start the .animate
  });
});

我的包括：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

我的风格：

#helpdocButton {
  width: 67px;
  height: 40px;
  background-color: #00ffff;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 5px solid #00ffff;
  padding: 5px;
  opacity: 0.45;
}

#helpdocButton:hover {
  -webkit-transition-duration: .90s;
  opacity: 2;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

那么，为什么动画不起作用？我试图从文档加载而不是mousover开始，但这也不起作用。我也在我的代码中的许多其他div上尝试过它。动画不适用于任何事物。其他所有功能都完全正常，但fadeDivIn功能不起作用。我在这里做错了吗？这与我的包含不兼容吗？谢谢。

Answer 1

就像你在评论中所说的那样使用一个非常旧版本的jquery和一个相当新版本的jquery ui ...我会把我的钱存在一些不一致的地方..

尝试将包含行更新为：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

然后给出一个镜头，如果你需要更多google hosted includes in the future - here is the link

Answer 2

把你的HTML代码然后我可以帮助你：我建议你打开Inspector元素或firebug如果有一些错误：我看到一些奇怪的行你可以纠正它们但它不会解决你的annimation问题

$('menu').hide('slow');
$('helpdoc').show('slow')

什么是'menu'和'helpdoc'，如果它们是html标签你可以像这样（helpdoc html标签存在？）如果它们是id do $（'＃menu'）＆amp; $（'＃helpdoc'），如果他们是班级做$（'。menu'）＆amp; $（ 'helpdoc'）。然后尝试查看$（'＃helpdocButton'）元素前面是否还有其他元素＆amp;用悬停＆amp;替换鼠标悬停测试。

Jquery ui动画功能不起作用

2 个答案: