Übergang in div

Ich habe drei verschiedene Felder in der gleichen Zeile. Ich möchte Übergang in diese Felder, wenn Sie in das Feld klicken. Gerade jetzt, wenn ich auf eine Box klicke, wird es von links nach rechts expandieren und volle Breite bekommen und andere Boxen werden in der nächsten Reihe gestapelt. Was ich will ist, wenn ich auf das rote Kästchen klicke, muss das Kästchen von links nach rechts expandieren und die restlichen Kästchen überlappen. Ähnlich, wenn ich auf den grünen Kasten klicke, muss er sich von beiden Seiten ausdehnen und beide Kästen auf der linken und rechten Seite überlappen und volle Breite bekommen. Ähnlich, wenn ich auf das blaue Kästchen klicke, muss es sich von der linken Seite aus erweitern und die Breite füllen, die die verbleibenden Kästchen überlappt. Kann mir bitte jemand helfen?Übergang in div

mein Code:

<html> 
<head> 
    <title>Transition</title> 
    <style type="text/css"> 
    .box { 
     width:30%; 
     height: 200px; 
     margin: 10px; 
     float:left; 
    } 
    #first { 
     background-color: red; 
    } 
    #second { 
     background-color: green; 
    } 
    #third { 
     background-color: blue; 
    } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div id="first" class="box"></div> 
     <div id="second" class="box"></div> 
     <div id="third" class="box"></div> 
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var containerWidth = $(".container").width(); 
      $(".box").click(function() { 
       var id = $(this).attr("id"); 
       $("#"+id).animate({width: "100%"}); 
      }); 
     }); 
    </script> 
</body> 
</html>

Jsfiddle link

Quelle

2017-03-28 Prajwal Bati

Gebrauchsposition zu überlappen – Ajay

Werden diese Boxen haben letztlich nur eine Hintergrundfarbe/Bild in ihnen, oder tatsächlichen Inhalt/Text? Ich denke, wie man das macht, hängt davon ab, und wenn es Inhalt ist, dann darüber, wie spezifisch man das bei den verschiedenen Kastenbreiten resp. während des Übergangs ... (in der Endgröße von Anfang an ausgelegt und anfangs abgeschnitten, gedehnt oder an die Breite angepasst, ...?) – CBroe

Wenn du überlappen willst, kannst du auch Breite: 0; andere Box auf Klick – Ajay

Transition transform: scale(), und das wird das Element, damit die anderen erweitern über. Sie können einfach eine Klasse über js für diese Eigenschaft dem Übergang zuweisen, und Sie können das in reinem CSS tun. Und da jedes Element 20% breit ist, wäre der Übergang scaleX(5) 100%. Und verwenden Sie transform-origin, um zu ändern, aus welcher Richtung die Elemente expandieren.

var containerWidth = $(".container").width(); 
 
$(".box").click(function() { 
 
    var id = $(this).attr("id"); 
 
    $(this).addClass('scale'); 
 
});

.box { 
 
    width:20%; 
 
    height: 200px; 
 
    margin: 10px; 
 
    float:left; 
 
    transition: transform .5s; 
 
    transform-origin: 0 0; 
 
} 
 
#first { 
 
    background-color: red; 
 
} 
 
#second { 
 
    background-color: green; 
 
    transform-origin: center center; 
 
} 
 
#third { 
 
    background-color: blue; 
 
    transform-origin: 100% 0; 
 
} 
 

 
.scale { 
 
    transform: scaleX(5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t \t <div id="first" class="box"></div> 
 
\t \t <div id="second" class="box"></div> 
 
\t \t <div id="third" class="box"></div> 
 
</div>

Obwohl dieser Effekt viel besser funktionieren würde, wenn die Elemente gleichmäßig innerhalb des übergeordneten angeordnet wurden, dann werden sie die Eltern gleichmäßig überlappen und füllen. Die Verwendung von display: flex; justify-content: space-between; auf dem Eltern ermöglicht dies.

var containerWidth = $(".container").width(); 
 
$(".box").click(function() { 
 
    var id = $(this).attr("id"); 
 
    $(this).addClass('scale'); 
 
});

.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.box { 
 
    width:20%; 
 
    height: 200px; 
 
    transition: transform .5s; 
 
    transform-origin: 0 0; 
 
} 
 
#first { 
 
    background-color: red; 
 
} 
 
#second { 
 
    background-color: green; 
 
    transform-origin: center center; 
 
} 
 
#third { 
 
    background-color: blue; 
 
    transform-origin: 100% 0; 
 
} 
 

 
.scale { 
 
    transform: scaleX(5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t \t <div id="first" class="box"></div> 
 
\t \t <div id="second" class="box"></div> 
 
\t \t <div id="third" class="box"></div> 
 
</div>

Quelle

2017-03-28 20:01:43

Vielen Dank. Das hat wie ein Zauber funktioniert. –

@ PrajwalBati genial du bist willkommen :) –

Ich habe eine andere Situation. Was, wenn ich 4 Boxen anstelle von 3 Boxen habe. Was wird mit der Eigenschaft "transform-origin" passieren? –

Übergang in div

Antwort

Verwandte Themen