0

Situation

  • .rightnav.front is clicked for DIV1.
  • DIV1 moves to the right, and opacity is lowered
  • DIV1 moves back left, and at completion opacity is 0
  • DIV1 gets class .hidden and .offset to hide it and to move it off screen, so it's not clickable anymore..
  • The next DIV (DIV with id 2 for test-purposes) has it's hidden and offset classes removed, and is the target for the next click-event.

Problem

The DIV moves right, but doesn't move left (back again) before it's hidden. See Codepen at the bottom for a try-out.

I'm only posting the JavaScript code here.. CSS and HTML you'll find in the codepen.

Here is the jQuery code

$(document.body).on('click','.rightnav.front', function () {
      var x = $(this).parent().parent();
      x.addClass('moveright')
      .one('transitionend', function() {
        x.removeClass('moveright')
      })
      .one('transitionend', function(){
        x.addClass('moveleft');
      })
      .one('transitionend', function() {
        x.addClass('hidden').addClass('offset');
        $('.rightnav.front').removeClass('front');
        var nextId = Number(x.attr('id')) + 1;
        var nextWidget = $('#' + nextId);
        nextWidget.removeClass('hidden');
        nextWidget.children().find('.rightnav').addClass('front');
      }) 
    });

CodePen

Here is the CodePen.IO link for a live test: http://codepen.io/nygter/pen/QbpegM

halfer
  • 19,824
  • 17
  • 99
  • 186
Terje Nygård
  • 1,233
  • 6
  • 25
  • 48
  • 1
    It's already not solution, but a simple advice that you don't have to `x.addClass('moveleft');` to animate backward move. It won't even work like that. Take a look at this curtailed version http://codepen.io/anon/pen/LVyNGG – Garrett Jun 05 '15 at 23:27
  • Thanks for the comment and tip Garrett :) If i remove the last .one, the animation works as it should, it's just when i need to get the logic for making the second div appear instead it gets messed up :) – Terje Nygård Jun 05 '15 at 23:36
  • 2
    @TerjeNygård why not just make the moveRight, moveLeft class just animate back and forth and transition the Opacity the entire time? this is a great candidate for css animations! – Daemedeor Jun 05 '15 at 23:47
  • 1
    @TerjeNygård Another short tip: You can add both classes in one action like that `addClass('hidden offset')` :) – Garrett Jun 05 '15 at 23:51
  • 1
    I'd like to help, but actualy I don't have enough time to solve this. Please read about animations in CSS and make animation `left -> right + opacity -> left` THEN make your favorite `.one('transitionend', function(){ ... });` :) and make it dissapear by adding Class or smth. GN and I wish it will be enough to solve this problem. https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes – Garrett Jun 06 '15 at 00:08

1 Answers1

1

Take a look at this solution, maybe (sure) it's not ideal, but should work as expected. As I mentioned in comment I've moved animation from jQuery to @keyframes.

Magic cames from:

.widget.moveright{
  left:450px;
  margin-left:-100px;
  opacity:0.5;
}

and

x.addClass('moveright')
      .one('transitionend', function() {
        x.removeClass('moveright')
      })
      .one('transitionend', function(){
        x.addClass('moveleft');
      }) //...

Transformed into:

@keyframes moveright{
  50% {
    left:450px;
    margin-left:-100px;
    opacity:0.5;
  }
  100% {
    opacity: 0;
  }  
}

.widget.moveright{
  animation: moveright 1s ease;
  -webkit-animation: moveright 1s ease;
}

and

x.addClass('moveright')
      .one('animationend', function() {
        $(this)
          .removeClass('moveright')
          .addClass('hidden offset');
        //...

See it in action at Codepen. To understand CSS animations take a look.

Garrett
  • 367
  • 1
  • 14
  • Thanks a LOT for this solution @Garrett !.. This is exactly what i was looking for, and from what i see now... i absolutely LOVE keyframes !! – Terje Nygård Jun 07 '15 at 19:18