Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Rotating a :after image onClick

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36446
    Philip_T
    Member

    Hi!

    I have a problem I just cant solve, been looking around and just cant find a solution.

    What I want to happen is.
    When you Click #footer-control the #footer moves up, and at the same time the #footer-control rotates 180 degrees.

    Would really appreciate any suggestions.
    Cheers

    HTML

    CSS



    #footer {position:fixed; bottom:0px; left:0px; color:#FFFFFF; display:block; width:100%; height:290px; margin:0px 0px -250px; background: url(images/bg-footer.jpg) no-repeat;}

    #footer-control { position:absolute; z-index:120; height: 40px; width: 40px; cursor:pointer;cursor:hand;}

    #footer-control:after { content:""; position:absolute; z-index:160; display:block; width:40px; height:40px; background: url(images/footer-arrow.png) no-repeat; }

    Jquery



    $(document).ready(function(){

    $('#footer-control').toggle(
    function () {
    $('#footer').animate({ marginBottom: '-50px' },{ duration: 500,});
    $('#footer-control').animate( { rotate: '180deg' },{ duration: 500,});
    },
    function () {
    $('#footer').animate({ marginBottom: '-250px' }, { duration: 500,});
    $('#footer-control').animate( { rotate: '0deg' },{ duration: 500,});
    }
    );

    });

    #95847

    I would recommend just using the toggleClass method, and animating it via CSS.

    #95886
    Philip_T
    Member

    Thanks it works… would never have taught of that

    I’m not to happy with that I had to separate the controls for the image… but it works and that’s what I needed… for now… have to make it sexy later. :)

    Again…. Thanks!

    #95967

    You’re welcome :)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.