Jquery click and hover events on different elements to effect on same element not working?

Question

I have problem with the following code.

$(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');}
  );
});

From the below picture,

#down1 is the down-arrow below the text

#icon2 is the about icon

What I am trying to achieve is when I hover on the down-arrow, the text should scroll down and when I mouseout, the scrolling should stop. And when I click on about icon, the text should scroll back to its default position.

But the problem here is only one effect is working either hover or click but not both at once.

Please help where I am doing it wrong with some detailed explanation if possible.

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

Answer 1

Obviously you have made a lil mistake...

try this

$(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');}
  );
});

I just changed the animate top to animate bottom. In your hover you set up the bottom style so you actualy should do the same on the about click. Otherwise the bottom pos will be still present. I would test this, but i cant since you only provided me with your orininal code page ;)

Actually this works: JSFIDDLE

(EDIT: changed the ops comment in the source)