jQuery toggle divs in einer glatten Art

Ich habe eine einfache Landingpage gemacht, wo Sie vier Divs haben, die jeweils 25% Bildschirmbreite einnehmen. Beim Anklicken werden alle anderen kleiner und der angeklickte wird erweitert. Dies funktioniert gut, obwohl es nicht glatt ist.jQuery toggle divs in einer glatten Art

Als nächstes, wenn sie alle Verkleidungen schließen, sollten sie zu der 25% Breite zurückkommen.

Da Javascript ist nicht meine Tasse Tee, hätte ich gerne einen Rat zu diesem Thema.

Der Code ist nicht effizient Ich denke, wenn jemand mit einer besseren Lösung kommt, ist das in Ordnung.

Genug Gespräche, hier ist ein codepen mit dem aktuellen Stand der Arbeit: https://codepen.io/MaartenTe/pen/JKYzMx

$("#one").click(function() { 
 
    $(".content-1").animate({ 
 
    width: 'toggle' 
 
    }, 500); 
 
    $(".content-2").hide(500); 
 
    $(".content-3").hide(500); 
 
    $(".content-4").hide(500); 
 
    $("#one").animate({ 
 
    width: '5%' 
 
    }); 
 
    $("#two").animate({ 
 
    width: '5%' 
 
    }); 
 
    $("#three").animate({ 
 
    width: '5%' 
 
    }); 
 
    $("#four").animate({ 
 
    width: '5%' 
 
    }); 
 
}) 
 

 
$("#two").click(function() { 
 
    $(".content-2").animate({ 
 
    width: 'toggle' 
 
    }, 500); 
 
    $(".content-1").hide(350); 
 
    $(".content-3").hide(350); 
 
    $(".content-4").hide(350); 
 
}) 
 

 
$("#three").click(function() { 
 
    $(".content-3").animate({ 
 
    width: 'toggle' 
 
    }, 500); 
 
    $(".content-1").hide(350); 
 
    $(".content-2").hide(350); 
 
    $(".content-4").hide(350); 
 
}) 
 

 
$("#four").click(function() { 
 
    $(".content-4").animate({ 
 
    width: 'toggle' 
 
    }, 500); 
 
    $(".content-1").hide(350); 
 
    $(".content-3").hide(350); 
 
    $(".content-2").hide(350); 
 
})

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #000; 
 
} 
 
.container-fluid { 
 
    display: flex; 
 
    height: 650px; 
 
} 
 
.container-fluid div { 
 
    width: 25%; 
 
    text-align: center; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    color: white; 
 
} 
 
div[class^="content-"] { 
 
    width: 100%; 
 
    color: black; 
 
    background-color: orange; 
 
} 
 
.content-1, 
 
.content-2, 
 
.content-3, 
 
.content-4 { 
 
    display: none; 
 
} 
 
#one { 
 
    background-color: black; 
 
} 
 
#two { 
 
    background-color: blue; 
 
} 
 
#three { 
 
    background-color: red; 
 
} 
 
#four { 
 
    background-color: green; 
 
} 
 
.content-1 { 
 
    background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.content-2 { 
 
    background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider2-copy.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.content-3 { 
 
    background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider-3.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.content-4 { 
 
    background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div id="one" class="toggle"> 
 
    1 
 

 
    </div> 
 
    <div class="content-1 color"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas 
 
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. 
 
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, 
 
    tincidunt cursus diam. 
 

 

 
    </div> 
 
    <div id="two" class="toggle"> 
 
    2 
 
    </div> 
 
    <div class="content-2 color"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas 
 
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. 
 
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, 
 
    tincidunt cursus diam. 
 

 

 
    </div> 
 
    <div id="three" class="toggle"> 
 
    3 
 
    </div> 
 
    <div class="content-3 color"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas 
 
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. 
 
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, 
 
    tincidunt cursus diam. 
 

 

 
    </div> 
 
    <div id="four" class="toggle"> 
 
    4 
 
    </div> 
 
    <div class="content-4 color"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas 
 
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque. 
 
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id, 
 
    tincidunt cursus diam. 
 

 

 
    </div> 
 
</div>

Quelle

2016-06-20 Maarten

Haben Sie über die Verwendung von CSS-Animationen gedacht zu machen? Sie können den Textfluss auch stoppen, indem Sie die Breite eines übergeordneten divs (mit Überlauf ausgeblendet) animieren, der ein Kind mit fester Breite enthält. – DBS

Hallend DBS' comment es hier mehr Sinn macht die CSS transition Eigenschaft zu nutzen. Ich bin mir nicht sicher, ob jQuery nativ ähnlich wie slideDown() für das Schrumpfen von Elementen Breiten unterstützt. Das Beste, was Sie tun können, ist, diese CSS-Eigenschaft für bestimmte Elemente mit jQuery umzuschalten, was hier ein Overkill wäre.

Ich habe eine JSFiddle Sie können einen Blick auf here werfen. Wenn ein Benutzer auf einen "Inhalts-Toggler" klickt, verkleinert er im Wesentlichen alle Toggles, indem er seine Breiten auf 5% festlegt, das nächste Geschwister des angeklickten Togglers mit .next() findet und seine Breite auf 80% einstellt.

Der Inhalts- und Inhalts-Toggler nutzen beide die CSS-Übergangseigenschaft, die dokumentiert ist here.

Quelle

2016-06-20 20:59:16 alex

css bearbeitet: geändert Breite

div[class^="content-"] { 
    width: 0%; 
    color: black; 
    background-color: orange; 
}

entfernt

.content-1, 
.content-2, 
.content-3, 
.content-4 { 
    display: none; 
}

und einige Änderungen im Code gemacht, um es einfacher fiddle

Quelle

2016-06-21 14:48:40

jQuery toggle divs in einer glatten Art

Antwort

Verwandte Themen