Forums

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

Home › Forums › JavaScript › Triggering a keyframe animation on a specific js variable value.

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 19, 2014 at 9:30 am #188753
    Philip1415
    Participant

    Hi. I am writing a sequence of animations that I require to start when the value of the js variable (trigger) equals 1. Frankly, I don’t know where to start. A internet search has not helped!

    For a click event I’m using the following

    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#forwards").click(function() {
            jQuery("#stone").addClass("reveal");
            jQuery("#forwards, #buttonbox").addClass("fadeOut");
            jQuery("#cover_2").addClass("fadeIncover_2").css('z-index', '10');
            jQuery("#left_plinth, #right_plinth, #left_pillar, #right_pillar, #head, #cornice, #cornice_minor_left, #cornice_minor_right, #innerbox, #messagebox").addClass("fadeIn");
            jQuery("#screen").addClass("fadeOutSlower");
            jQuery("#accessbox").addClass("expandScreen");

        });
    });
    </script>

    I’d really appreciate some help with this as my javascript knowledge is basic to say the least.
    Many thanks
    Philip

    November 19, 2014 at 10:30 am #188760
    Paulie_D
    Member

    Well you have (I think) to use an if/else function. Also and there doesn’t seem to be a ‘variable’ in your current Jquery.

    What triggers the variable reaching or becoming ‘1’…

    I’m thinking a Codepen demo of what you have so far would be useful.

    November 20, 2014 at 8:59 am #188827
    Philip1415
    Participant

    Thanks for your reply. I agree that a if/else function will be required. There is no variable in the posted code because, as I said, this is just an example of the code I am using to trigger animations on a click event. Ideally I would use this code wrapped in if?else but with something replacing the click()

    November 20, 2014 at 9:39 am #188842
    Paulie_D
    Member

    Kinda hard to be specific without more information.

    What would replace the click?

    November 20, 2014 at 9:43 am #188843
    Philip1415
    Participant

    I suspect this may not be helpful but here goes.

    A way of detecting the value of trigger – it will eithe be 0 or 1.

    November 20, 2014 at 9:58 am #188844
    Paulie_D
    Member

    What would cause the trigger to change?

    Basically you need an initial function to check that the value has actually changed

    .change perhaps? – http://api.jquery.com/change/

    Then you need to get the current value, compare the target value and if they are equal do something.

    If they aren’t you need to loop back again (I think) to check again…or perhaps not..in this instance.

    November 21, 2014 at 9:21 am #188909
    Philip1415
    Participant

    Its the ‘do something’ bit I’m stuck on!

    I’ve just tried
    if (trigger = 1) {
    jQuery("#BoxBreath").css('background-color', '#0F6');
    };
    <code></code>
    In some experimental code and that didn’t work

    November 21, 2014 at 9:51 am #188917
    Paulie_D
    Member

    If you demo it for us it would be easier…

    Just a few boxes and the trigger…

    Otherwise we’re (well I) are just floundering in the dark.

    November 21, 2014 at 9:57 am #188920
    Philip1415
    Participant

    Here you go.
    html

    `
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset=”utf-8″>
    <title>Untitled Document</title>
    <link href=”css/expanding_box.css” rel=”stylesheet” type=”text/css”>
    </head>
    <body>
    <div class=”BoxBreath” id=”BoxBreath”></div>
    <script type=”text/javascript”>
    jQuery(document).ready(function() {
    var trigger = 1;
    if (trigger = 1) {
    jQuery(“#BoxBreath”).css(‘background-color’, ‘#0F6’);

        };
});
&lt;/script&gt;

    </body>

    and the css

    `
    @charset “utf-8”;
    /* CSS Document */

    • { margin: 0; padding: 0; border: 0; }

    .BoxBreath {
    position:relative;
    top:300px;
    left:300px;
    width:200px;
    height:100px;
    background-color:#C0F;
    animation: breath linear 1s infinite;
    }

    @keyframes breath{
    0% {
    opacity:0;
    transform: rotate(0deg) scaleX(0) scaleY(0) ;
    }
    50% {
    opacity:1;
    transform: rotate(0deg) scaleX(1) scaleY(1) ;
    }
    100% {
    opacity:0;
    transform: rotate(0deg) scaleX(0) scaleY(0) ;
    }
    }

    `
    </html>

    `

    November 21, 2014 at 10:09 am #188923
    Paulie_D
    Member

    Nope…

    If you demo it for us it would be easier…

    Please don’t post huge chunks of code like that .

    Demo it in Codepen.io.

    Thanks.

    November 22, 2014 at 8:01 am #188979
    Philip1415
    Participant

    You are correct of course, as it stands the code doesn’t make sense. But as I explained in an earlier post post this is especially written experimental to test what I’m doing wrong. So, I’m seeing what happens when trigger is 1.

    The solution is as if often the case obvious – I’d forgotten to include a link to jQuery. Also
    if (trigger = 1)should be if (trigger == 1)

    Thanks to you both for your input.

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