简体   繁体   中英

How to animate object left to match same pixel width as the window width

When I click the .trigger i want the object positioned at {left: '0'} to move left to match the same pixels to whatever the pixel width of the browser window is. Can someone help me figure this out. This is what I've worked together so far, I can't figure out the function that needs to go after else.. {left: 'pixel width of browser window'}

$(document).ready(function() {
    // Prompt
    $('.trigger').live('click', toggleName);

    function toggleName() {
        if ($("#some-id").attr('data-state') == 'open') $("#some-id").animate({
            left: '0'
        }, 500, 'easeOutExpo', function() {
            $(this).attr('data-state', 'close')
        }), ;
        else $("#some-id").animate({
            left: 'pixel width of browser window'
        }, 500, 'easeOutExpo', function() {
            $(this).attr('data-state', 'open')
        }), ;
        return false;
    }
});​

Use the width function to get the width of the window :

 else $("#some-id").animate({
        left: $(window).width()
 }, ...

This will move the div to the right and let it leave the window (depending on your css).

If you want the div to go stick to the right, you'd better use right: 0 instead.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM