Alright so I have two functions. One function re positions a block to the center of the screen (on a higher z axis). No problem there. The problem comes in with the second function. The second function moves the block back to where it was. The problem there, is when the block reaches its destination, it pops back to the center of the screen. I don't want it to do that; I want it to stay there...
Here are the functions"
$.fn.showTips = function() { // THIS WORKS
var curPos = this.position();
this.css({'position': 'absolute', 'background': 'CCCACB'});
this.data('cur-pos-top', curPos.top);
this.data('cur-pos-left', curPos.left);
this.data('cur-height', this.height());
this.data('cur-width', this.width());
this.animate({
"top": ((($("#content").height() - this.outerHeight()) / 2) + $("#content").scrollTop() + "px"),
"left": ((($("#content").width() - this.outerWidth()) / 2) + $("#content").scrollLeft() + "px"),
}, 500);
return this;
}
$.fn.hideTips = function() { // THIS DOESN'T
this.animate({
"top": this.data('cur-pos-top') + 'px',
"left": this.data('cur-pos-left') + 'px',
"width": this.data('cur-width') + 'px',
"height": this.data('cur-height') + 'px'
}, 500);
And here I have the code that fires said functions off.
$("#Border").click(function() {
$("#Border").showTips();
}
$("#ssub").click(function() {
$("#Border").hideTips();
}
My guess toward the problem, is that when the block moves out of place, the block underneath it moves to take its place. When the function fires to move the block back, the one that doesn't take its place doesn't move down. Possibility of one block being in the way of the other? it could also be a CSS positioning issue. Or something I'm missing. I don't know.
Thanks for your help.