CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-animate
Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

How to fix this animation using JQuery?

I am using JQuery to make a 'Read More' button. When someone clicks onthe button a popup appears. This popup is actually a hidden div that appears. My problem is that while I click the button I want the div to appear from the button and when I click the cross mark on the popup it sould go back to the same button where it originated from but the result that I am getting is, when I click on the button the div appears from it whereas when I click cross it goes to the 'read more' button which I clicked the first. Please help me fix this. I guess there is a small glitch in my code. I have it on fiddle http://jsfiddle.net/shivkumarganesh/qLEbD/

Upvotes: 0

Views: 142

Answers (2)

marcnewport
marcnewport

Reputation: 91

Each time you open a button, you are adding another listener to the close button. You could unbind the close listener before rebinding it eg. http://jsfiddle.net/qLEbD/54/

or better yet...

bind the close listener once (outside the button click function) and store the left position on button click eg.

//doc ready...
function() {

  var leftPosition;

  $('.button').click(function() {
    //animate popup to open
    leftPosition = $(this).offset.left;
  });

  $('#close').click(function() {
    //animate popup to close using leftPosition
  });
}();

Upvotes: 0

techfoobar
techfoobar

Reputation: 66693

Check this fiddle: http://jsfiddle.net/6uLF7/

The problem was with the local scope of the variables that store the target left and top offsets.

CHANGES

Added 2 declarations at the top:

var readMoreInfoTop = 0;
var readMoreInfoLeft = 0;

Removed var keyword from the top and left assignments inside the click handler

readMoreInfoTop = readMoreOffset.top + 10;
readMoreInfoLeft = readMoreOffset.left + 10;

Upvotes: 3

Related Questions