Grow your CSS skills. Land your dream job.

Setting variable to animate();

  • # June 29, 2013 at 3:46 pm

    Hi guys;
    Can I somehow to set variable to css property in animate function, like this

    function showHideTextBlock() {
    var imgWidth = $imgBlock.css(‘width’);
    $textBlock.animate({marginRight: -imgWidth}, 100);
    $textBlock.animate({marginRight: ’0′}, 300);
    }
    In one code that I saw it work, but my doesn’t work. Looking fo advice. Thanks

    # June 29, 2013 at 5:07 pm

    you cant obtain dynamically information about elements in css unless its one elements parent with percentages or inherit or a good use of css calc() function.

    in short no you cant

    # June 29, 2013 at 6:25 pm

    I think you’re going about it wrong but I’m not sure. Instead of trying to target the CSS styling of the image, target the image itself and animate a width/height change.

    # June 29, 2013 at 6:43 pm

    Check if `$imgBlock.css(‘width’);` gives you the value you’re after (`console.log(imgWidth);`). If not, check:

    - http://api.jquery.com/width/ (`$imgBlock.width()`) -or-
    - http://api.jquery.com/innerWidth/ -or-
    - http://api.jquery.com/outerWidth/

    # June 30, 2013 at 1:07 am

    @CrocoDillon I understood your main concept:

    > it useful to work in small steps, and test every step you make (using console.log(‘some useful feedback’);)

    It very helpful.

    I checked **console.log(imgWidth);** and it gives me 460px – it what I looking for, but doesn’t work

    # June 30, 2013 at 2:06 am

    I have found this solution

    // hide and show image
    function showHideImgBlock() {
    var imgWidth = $imgBlock.css(‘width’);
    console.log(imgWidth)
    $imgBlock.animate({marginRight: ‘-=’ + imgWidth}, 10);
    $imgBlock.animate({marginRight: ’0′}, 600);
    }

    showHideImgBlock() ;

    or could I make this more simple?

    # June 30, 2013 at 2:39 am

    oh yes I could :))

    animate({marginRight: ‘-’ + imgWidth}

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".