Wie blende ich einen Container nach links, wenn ich auf ein Objekt im Container klicke

Question

Ich versuche einen Effekt zu machen, der ausgeführt wird, indem man auf ein Objekt im Container klickt, Container nach rechts/links blättert und danach verblasst Der Inhalt ist verblasst. Es muss ausgeblendet werden, um Platz für neue Inhalte zu schaffen.

Der zukünftige Header wird außerhalb des Containers platziert, so dass der Header nicht verblasst. Nichts, was ich versuchte, scheint zu funktionieren. Irgendwelche Vorschläge für dieses Problem?

Ich werde die Wirkung auf meiner Website implementieren www.bartmulder.nl/beta1.0 so, wenn Sie den Container Whit auf ein Foto klicken, um alle Fotos vor der Anzeige keine verblassen und Folie wird

// change .box1 to .container and you will see the effect that i am looking for 
 
$('.box1').on('click', function() { 
 
    $(this).toggleClass('clicked'); 
 

 
    setTimeout(function() { 
 
    document.getElementById("containerWerk").style.display = "none"; 
 
    }, 500); 
 
});

.container { 
 
    -webkit-transition: 0.5s; 
 
    -webkit-transition-timing-function: ease; 
 
    transition-timing-function: ease; 
 
} 
 

 
.box img { 
 
    margin: 0px auto; 
 
    cursor: pointer; 
 
} 
 

 
.container.clicked { 
 
    margin-left: -100px; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containerWerk" class="container"> 
 
    <div class="box1"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div> 
 
    <div class="box2"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div>

Answer 1

Hier anderen Seite gehen ist die jQuery/JavaScript Weg, dies zu bewerkstelligen ... Einfach anrufen animate auf dem Elemen t und spezifizieren Sie, welche Art von Animation, Geschwindigkeit und Vervollständigungsfunktion (optional).

Im folgenden Beispiel übergebe ich ein JSON-Objekt, um anzugeben, welche Aktionen mit der Animation ausgeführt werden sollen (die ich aus CSS entfernt habe). Nach der Animation wird das Element dann nicht mehr angezeigt.

// change .box1 to .container and you will see the effect that i am looking for 
 
$('.box').on('click', function() { 
 
    $(this).animate({ 
 
    opacity: 0, 
 
    marginLeft: -100 
 
    }, 1000, function() { 
 
    $(this).css("display", "none"); 
 
    }); 
 
});

.box img { 
 
    margin: 0px auto; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containerWerk" class="container"> 
 
    <div class="box box1"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div> 
 
    <div class="box box2"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div>

Answer 2

Sie gelten müssen Die Klasse "klickte" im übergeordneten Element ".container", nicht in "this". Verwenden Sie also den übergeordneten jQuery, um auf das übergeordnete Element ".container" zuzugreifen, um die angeklickte Klasse im richtigen Element hinzuzufügen.

// change .box1 to .container and you will see the effect that i am looking for 
 
$('.box1').on('click', function() { 
 
    $(this).parent('.container').toggleClass('clicked'); 
 

 
    setTimeout(function() { 
 
    document.getElementById("containerWerk").style.display = "none"; 
 
    }, 500); 
 
});

.container { 
 
    -webkit-transition: all ease .5s; 
 
    transition: all ease .5s; 
 
    opacity: 1; 
 
    margin-left:0; 
 
    position: relative; 
 
} 
 

 
.box img { 
 
    margin: 0px auto; 
 
    cursor: pointer; 
 
} 
 

 
.container.clicked { 
 
    margin-left: -100px; 
 
    opacity: 0; 
 
    transition: all ease .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containerWerk" class="container"> 
 
    <div class="box1"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div> 
 
    <div class="box2"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div>

Wenn Sie nur das Bild

// change .box1 to .container and you will see the effect that i am looking for 
 
$('.box').on('click', function() { 
 
    $(this).toggleClass('clicked'); 
 

 
    setTimeout(function() { 
 
    $(this).css('display','none'); 
 
    }, 500); 
 
});

.container { 
 
    -webkit-transition: all ease .5s; 
 
    transition: all ease .5s; 
 
    opacity: 1; 
 
    margin-left:0; 
 
    position: relative; 
 
} 
 

 
.box img { 
 
    margin: 0px auto; 
 
    cursor: pointer; 
 
    transition: all ease .5s; 
 
    opacity: 1; 
 
    margin-left:0; 
 
    position: relative; 
 
} 
 

 
.box.clicked { 
 
    margin-left: -100px; 
 
    opacity: 0; 
 
    transition: all ease .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containerWerk" class="container"> 
 
    <div class="box box1"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div> 
 
    <div class="box box2"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
 
    </div>