Jquery if else structure on click each function

Question

I have 6 divs, all with a general class name ".scene", and also have individual class names as ".scene1", ".scene2", ".scene3", ".scene4", ".scene5", ".scene6".

Each scene contenir a button. All buttons have a general class name ".b", and also have individual class names as ".b1", ".b2", ".b3", ".b4", ".b5", ".b6".

When I click on a button, all scenes go a their own direction, always to the same (out of the screen), except that one, which its button is clicked. The exception scene is scaled to 100% width and height, and has top and left 0.

For the moment I declare each individual button click function separately (in this example the button of the ".scene3", means the ".b3" button is clicked, so its parent is staying in screen, and scaled to the screen size) :

$('.b3').click(function(){
    $('.scene1').delay(200).animate({'left':'100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene2').delay(200).animate({'left':'-100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene3').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
    $('.scene4').delay(300).animate({'top':'150%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene5').delay(250).animate({'left':'-100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
    $('.scene6').delay(200).animate({'left':'-100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
});

How can I write the codes shorter (declare all under the general .b click) instead of declaring each invidual .b click function ?

I thought to something like that but Dreamweaver already shows error in my codes, and this multiple if else structure is beyond my abilities as I am not professional:

HTML structure :

<main>
    <section class="scene scene1">
        <div class="b b1">
    </section>
    <section class="scene scene2">
        <div class="b b2">
    </section>
    <!-- and so on...-->
</main>

Jquery codes:

$('.b').click(function () {
    $('.scene').each(function(){
        if ($(this).hasClass('.scene1')) {
                $('.scene1').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
        }
        else {
            $('.scene1').delay(200).animate({'left':'100%'}, 1400, 'easeInOutCubic').delay(200).fadeOut(1200);
        }
        else if ($(this).hasClass('.scene2')) {
                $('.scene2').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
        }
        else {
            $('.scene2').delay(600).animate({'left':'-100%'}, 1700, 'easeInOutCubic').delay(200).fadeOut(1200);
        }
        else if ($(this).hasClass('.scene3')) {
                $('.scene3').delay(200).animate({'top':0,'left':0,'width':'100%','height':'100%'}, 3000, 'easeInOutCubic');
        }
        else {
                $('.scene3').delay(300).animate({'top':'150%'}, 1700, 'easeInOutCubic').delay(200).fadeOut(1200);
        }
        // ...and so on...);
    });
});

Answer 1

To determine the "active" scene, you can use .closest eg (given provided HTML):

$('.b').click(function () {
    $(this).closest(".scene").delay(200).animate({'top':0,'left':0...
});

Then for the others, you just need to ensure it's not the "active" scene, for which you can use .not(thisScene), eg:

$(".b").click(function() { 
  var thisScene = $(this).closest(".scene");
  
  thisScene.css("border-color", "rebeccapurple");
  
  $(".s1").not(thisScene).css("border-color", "red");
  $(".s2").not(thisScene).css("border-color", "green");
  $(".s3").not(thisScene).css("border-color", "yellow");
  $(".s4").not(thisScene).css("border-color", "pink");
});

<div class='scene s1'><button class='b'>btn</button></div>
<div class='scene s2'><button class='b'>btn</button></div>
<div class='scene s3'><button class='b'>btn</button></div>
<div class='scene s4'><button class='b'>btn</button></div>

In this example, I've used border-color, which, in this example, could just come at the end for the active one, but in your case, each will be animated differently, so replace .css("border-color".. without your different animations.

This is all the code you need, no .each and no if-else