So, I have two divs: #div1 and #div2. I want '#div2' to disappear when '#div1' has the CSS value: top = 0px.
Here is the CSS:
#div1 {
top: 0px;
}
#div2 {
display: block;
}
if ( $('#div1').css('top') == '0px' ) {
$("#div2").hide();
} else {
$("div2").fadeIn();
}
$("div2").click(function(){
$("#div1").animate({top:"+=315px"}, "slow");
});
The problem I am running into is that I'm changing that CSS value (for #div1) via Javascript and for this reason, my js doesn't acknowledge the change and doesn't make the div disappear (I think). Is there any way to make #div2 disappear when #div1's CSS property top = 0 and reappear whenever it is changed? Or is there a better way to implement this?
rather than using this use method .position()
<script>
var p = $("#div1");
var position = p.position();
alert( "left: " + position.left + ", top: " + position.top );
</script>
more detail about this : http://api.jquery.com/position/
Try this for click function:
$("div2").click(function(){
$("#div1").parent().css({postion,"relative"});
$("#div1").css({postion,"absolute"});
$("#div1").animate({top:"+=315px"}, "slow");
});
in order to reflect proper positioning #div1 should have absolute position and parent of #div1 should have relative position.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With