The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

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

    # 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’);
    $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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed