Switch between multiple animations and styles using CSS

Question

Switch between multiple animations and styles using CSS

I'm currently working on the code below that involves toggling between different elements. Despite my attempts to add/remove classes and use toggle, it doesn't seem to be functioning as expected. Is there a straightforward way to revert everything back on the second click?

$( ".next" ).click(function() {
$('.triangle').animate({  borderSpacing: -180 }, {
    step: function(now) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
},'linear');

$('.engine').css('background-image','url(/Incubator/wp-content/themes/incubator/images/basketball.jpg)');
$('.info-block').animate({"margin-left": "0px"}, 1000);
$('.triangle').animate({"margin-left": "380px"}, 1000);
$('.alt').css('display', 'block');
$('.main').css('display', 'none');
$('.messy').fadeOut("slow");
$('.compete').fadeIn("slow");
$(this).removeClass("next");
$(this).addClass("back");
});


$( ".back" ).click(function() {
$('.triangle').animate({  borderSpacing: 0 }, {
    step: function(now) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
},'linear');

$('.engine').css('background-image','url(/Incubator/wp-content/themes/incubator/images/engine.jpg)');
$('.info-block').animate({"margin-left": "800px"}, 1000);
$('.triangle').animate({"margin-left": "722px"}, 1000);
$('.alt').css('display', 'none');
$('.main').css('display', 'block');
$('.messy').fadeIn("slow");
$('.compete').fadeOut("slow");
$(this).removeClass("back");
$(this).addClass("next");
});

and here's the HTML sample:

<div data-speed="5" class="engine parallax">
    <div class="wrapper">

        <div data-pos="550" class="next fade-in triangle"></div>
        <div data-pos="550" class="fade-in">
            <h3 class="messy">Get messy in the Incubator!</h3>
            <h3 class="compete">Compete in the Incubator!</h3>
        </div>
            <div data-pos="550" class="fade-in info-block">
                <p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p class="alt">Test text here sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="">Get started today</a>
            </div>
    </div>
</div>

javascript jquery css

Answer 1

Answer №1

Edit, Updated

Instead of adding and removing classes like .next and .back at the .triangle element to toggle effects, try using a single click event handler.

I have included easing: 'linear' in the options property where the easing property was not set.

// Set `.triangle` `.data("clicked")` to false initially
var t = $(".triangle").data("clicked", false)
// Save `css` `matrix()` positions
, props = []
// Reset `matrix`
, p = props.length > 0 ? props.reverse() : false;
// Define both initial and reset animations on a single `click` event
t.click(function() {
  // Cache value of `.data("clicked")`, initially set to `false`
  var d = $(this).data("clicked") === true
  // Initial index to iterate over `props`
  , n = 0;
  // If `d` is set, set `prop` to -180, else set it to 0
  $(d ? {
    prop: -180
  } : {
    prop: 0
  }).animate(d ? {
    prop: 0
  } : {
    prop: -180
  }, {
    step: function(now) {
      if (d) {
        t.css("transform", p[++n]) 
      };
      t.css("transform", "rotate(" + now + "deg)");
      props.push(t.css("transform"));
    },
    duration: "slow",
    easing: "linear",
    complete: function() {
      var r = t.data("clicked") === false ? true : false;
      $(".engine").css("background-image", "url(/Incubator/wp-content/themes/incubator/images/" + (!r ? "basketball" : "engine") + ".jpg)");
      t.add(".info-block").animate({
        "margin-left": !r ? "0px" : "800px"
      }, 1000);
      $(".alt")[!r ? "show" : "hide"]();
      $(".main")[!r ? "hide" : "show"]();
      $(".messy, .compete").fadeToggle("slow");
      t.data("clicked", r);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-speed="5" class="engine parallax">
  <div class="wrapper">

    <div data-pos="550" class="next fade-in triangle">next</div>
    <div data-pos="550" class="fade-in">
      <h3 class="messy">Get messy in the Incubator!</h3>
      <h3 class="compete">Compete in the Incubator!</h3>
    </div>
    <div data-pos="550" class="fade-in info-block">
      <p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="alt">Test text here sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="">Get started today</a>
    </div>
  </div>
</div>

Answer 2

Edit, Updated

Instead of adding and removing classes like .next and .back at the .triangle element to toggle effects, try using a single click event handler.

I have included easing: 'linear' in the options property where the easing property was not set.

// Set `.triangle` `.data("clicked")` to false initially
var t = $(".triangle").data("clicked", false)
// Save `css` `matrix()` positions
, props = []
// Reset `matrix`
, p = props.length > 0 ? props.reverse() : false;
// Define both initial and reset animations on a single `click` event
t.click(function() {
  // Cache value of `.data("clicked")`, initially set to `false`
  var d = $(this).data("clicked") === true
  // Initial index to iterate over `props`
  , n = 0;
  // If `d` is set, set `prop` to -180, else set it to 0
  $(d ? {
    prop: -180
  } : {
    prop: 0
  }).animate(d ? {
    prop: 0
  } : {
    prop: -180
  }, {
    step: function(now) {
      if (d) {
        t.css("transform", p[++n]) 
      };
      t.css("transform", "rotate(" + now + "deg)");
      props.push(t.css("transform"));
    },
    duration: "slow",
    easing: "linear",
    complete: function() {
      var r = t.data("clicked") === false ? true : false;
      $(".engine").css("background-image", "url(/Incubator/wp-content/themes/incubator/images/" + (!r ? "basketball" : "engine") + ".jpg)");
      t.add(".info-block").animate({
        "margin-left": !r ? "0px" : "800px"
      }, 1000);
      $(".alt")[!r ? "show" : "hide"]();
      $(".main")[!r ? "hide" : "show"]();
      $(".messy, .compete").fadeToggle("slow");
      t.data("clicked", r);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-speed="5" class="engine parallax">
  <div class="wrapper">

    <div data-pos="550" class="next fade-in triangle">next</div>
    <div data-pos="550" class="fade-in">
      <h3 class="messy">Get messy in the Incubator!</h3>
      <h3 class="compete">Compete in the Incubator!</h3>
    </div>
    <div data-pos="550" class="fade-in info-block">
      <p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="alt">Test text here sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="">Get started today</a>
    </div>
  </div>
</div>

Switch between multiple animations and styles using CSS

Answer №1

Similar questions

Error encountered using Meteor 1.3 autoform/quickform integration

Difficulty with obtaining .responsetext in AJAX and PHP

Angular - Dealing with the value of zero in the @if template syntax

What is the best method for disabling autoscroll for a specific div id when the :target attribute

Sending an AJAX request will only transmit a portion of an array when using the JSON.stringify

Interactive drop-down menu for populating a input field

Perform an action when a button is clicked in a VueJs single-page application

CSS - Yet another perplexing question that shouldn't have arisen

Encountering a problem when attempting to utilize AngularFire's Cloud Messaging Angular module due to missing configuration values for the app

The error message "unhandledPromiseRejectionWarning: TypeError: Cannot read property 'password' of null" indicates that there is an issue

Automatically fill in a text field based on the selection from a drop

Style condition within an HTML element

Angular project icons not displaying in the browser

Track and store your current progress with a countdown deadline using a progress bar in Bootstrap 4

The AJAX request function in JavaScript seems to be failing to return any response

What is the best way to choose all elements that fall between two specific elements?

Beginner's guide to setting up an HTTPS server using Express.js

Tips for ensuring that eslint typescript identifies interfaces in .d.ts files

The image is not properly aligned with the background image

Issue with Jquery/JqGrid: When a grid contains only one column, the grid paging controls are not fully displayed and are cut