Geek asks and answers

CSS element motion detection caused by CSS transitions

I have a Flash element on my page, and since Flash is usually quite delicate, it should be placed in integer pixel values ​​(see Request an immediate request to request a Flash webcam if you need details).

I achieve this by wrapping objectin div, installing position:absolutein objectand using jQuery to install leftand topin a rounded offsetcontaining div. It was a sip, here it is in code form:

<div id="wrapper">
    <object id="flash" blah style="position:absolute">
        <!-- blah -->
    </object>
</div>
<script>
    function update(){
        var p=$('#wrapper').offset();
        $('#flash').css({'left':Math.round(p.left),'top':Math.round(p.top)});
    }
    $(document).ready(function(){
        $(window).resize(update);
        update();
    });
</script>

And all this works fine (if the code above has an error, it just from shortening it)

, , , JavaScript, CSS transition-duration . ? , , , , , . , (, ).

+5
1

: http://jsfiddle.net/DpYNm/ , , , , !

function checkForMove() {
if ($('#testDiv').prop('user_default_width') === undefined) {
    $('#testDiv').prop('user_default_width', $('#testDiv').width());
    $('#testDiv').prop('user_is_moving', false);
}

if ($('#testDiv').width() != $('#testDiv').prop('user_default_width') && !$('#testDiv').prop('user_is_moving')) {
    $('#log').html($('#log').html() + "Move started<br/>");
    $('#testDiv').prop('user_is_moving', true);
}
if ($('#testDiv').width() == $('#testDiv').prop('user_default_width') && $('#testDiv').prop('user_is_moving')) {
    $('#log').html($('#log').html() + "Move ended<br/>");
    $('#testDiv').prop('user_is_moving', false);
}

setTimeout(checkForMove, 1);

}

checkForMove();

CheckForMove , div . , ( ), helper, , , . , , !:)

0

More articles:


All Articles