I'm experimenting with creating a falling effect for a DIV element when a piece of text is hovered over. The original effect can be seen here.
var $dropDiv = $('#dropDiv');
$('#holder p').on('hover', function () {
// Get position of the clicked div
var offset = $(this).offset();
// Get dimensions of the clicked div
var h = $(this).outerHeight();
var w = $(this).outerWidth();
// Get dimensions of the falling div
var dh = $dropDiv.outerHeight();
var dw = $dropDiv.outerWidth();
// Calculate initial horizontal position
var initLeft = offset.left + ((w / 2) - (dw / 2));
// Animate the falling effect
$dropDiv.css({
left: initLeft,
top: $(window).scrollTop() - dh,
opacity: 0,
display: 'block'
}).animate({
left: initLeft,
top: offset.top - dh,
opacity: 1
}, 800, 'easeOutBounce');
});
This is the code I've written. Initially, I thought the issue was with the libraries, so I updated them to match the versions used in the fiddle.
<script src="fall.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
The fiddle also had some specific CSS styling which I incorporated into my code.
#holder {
position: absolute;
top: 200px;
left: 100px;
}
#dropDiv {
display: none;
position: absolute;
top: -20px;
background: #ccc;
}
Despite checking the error console and finding no issues, the effect still doesn't work. I'm using Safari Version 5.1.10 and hoping to make it work for both me and Chrome users. What could be the problem and how can I resolve it?