Jquery点击并在不同元素上悬停事件以影响相同的元素不起作用？

Question

我遇到以下代码问题。

$(document).ready(function(){
  $('#icon2').click(
  function(){ $('#st1').animate({top:'-10px'},500);}
  );
  $('#down1').hover(
  function(){ $('#st1').stop(true, false).animate({bottom:'+=250px'},10000,'linear');}, 
  function(){ $('#st1').stop(true, false).animate({bottom:'-=0px'},10000,'linear');}
  );
});

从下图中，

＃down1 是文本下面的 向下箭头

＃icon2 是 关于 图标

我想要实现的是当我将鼠标悬停在向下箭头上时，文本应向下滚动，当我鼠标移开时，滚动应停止。当我点击about icon时，文本应该回滚到默认位置。

但问题是，只有一种效果是悬停或点击，但不能同时进行。

如果可能的话，请帮助我做错了一些详细的解释。

jsfiddle：http://jsfiddle.net/g1patnaik/ycvfrgwd/1/

Answer 1

显然你犯了一个小错误......

试试这个

$(document).ready(function(){
  $('#icon2').click(
  function(){ $('#st1').stop(true, false).animate({bottom:'0px'},500);}
  );
  $('#down1').hover(
  function(){ $('#st1').stop(true, false).animate({bottom:'+=250px'},10000,'linear');}, 
  function(){ $('#st1').stop(true, false).animate({bottom:'-=0px'},10000,'linear');}
  );
});

我刚刚将动画top更改为动画bottom。在你的悬停中你设置了底部样式，所以你实际上应该在左键单击上做同样的事情。否则底部位置仍然存在。我会测试这个，但我不能，因为你只提供了我的orininal代码页;）

实际上这有效：JSFIDDLE

（编辑：更改了源中的操作注释）