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

enter image description here

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/

i dont want to see the live code... i want to have a plattform where i can add some things to may provide you with a solution :) i dont need the stuff around :) — Dwza
– Dwza, Commented Nov 2, 2014 at 7:37
your animation is not really running in your provided fiddle. check this fiddle here and set it up right: jsfiddle.net/wu2djh98 — Dwza
– Dwza, Commented Nov 2, 2014 at 8:19

Dwza · Accepted Answer · 2014-11-02 08:39:29Z

2

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)

edited Nov 2, 2014 at 8:39

answered Nov 2, 2014 at 7:43

Dwza

6,5657 gold badges47 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GP92 Over a year ago

I have changed it to up..and here is the jfiddlet. jsfiddle.net/0f3hdm9h/1 but still not working! :(

GP92 Over a year ago

yes it works and by adding in click function stop(true,false) to avoid delay

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related