Reveal div in Inline-Position

Question

Der Versuch, ein div offenbaren zu gleiten, aber es scheint, gibt es ein Jitter oder div wird nicht inline sein wegen der Anzeige: Block oder so etwas. Was ich möchte, ist, wenn ich Share-Taste klicke, zeigt das div mit Social-Symbol reibungslos neben Share-Taste. Jemand bitte etwas Licht. Danke im Voraus.

Codepen:http://codepen.io/rezasan/pen/XjgppW

Snippet Beispiel unter

$('.social').click(function(){ 
 
     $('.social-icons').toggle("slide"); 
 
    });

.social { 
 
     display: inline-block; 
 
     height: 47px; 
 
     color: #58585b; 
 
     text-transform: uppercase; 
 
     font-size: 14px; 
 
     line-height: 47px; 
 
     padding: 0px 20px; 
 
     border: 1px solid rgba(88,88,91,0.5); 
 
     transition:width .2s ease; 
 
     -webkit- transition:width .2s ease; 
 
    } 
 

 
    .social-icons { 
 
     display: inline-block; 
 
     height: 47px; 
 
     color: #58585b; 
 
     font-family: "freight-text-pro",sans-serif; 
 
     text-transform: uppercase; 
 
     font-size: 14px; 
 
     line-height: 47px; 
 
     padding: 0px 20px; 
 
     border: 1px solid rgba(88,88,91,0.5); 
 
     margin-left: -5px; 
 
     display:none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="social"> 
 
    <a>SHARE</a> 
 
    </div> 
 
    <div class="social-icons"> 
 
    <a>FB</a> 
 
    <a>TW</a> 
 
    <a>G+</a> 
 
    <a>WS</a> 
 
    </div>

Answer 1

aktualisieren CssFloat:left verwenden.

$('.social').click(function(){ 
 
    $('.social-icons').toggle("slide"); 
 
});

.social { 
 
    display: inline-block; 
 
    height: 47px; 
 
    color: #58585b; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    line-height: 47px; 
 
    padding: 0px 20px; 
 
    border: 1px solid rgba(88,88,91,0.5); 
 
    transition: width .2s ease; 
 
    float: left; 
 
} 
 
.social-icons { 
 
    display: inline-block; 
 
    height: 47px; 
 
    color: #58585b; 
 
    font-family: "freight-text-pro",sans-serif; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    line-height: 47px; 
 
    padding: 0px 20px; 
 
    border: 1px solid rgba(88,88,91,0.5); 
 
    /* margin-left: -5px; */ 
 
    display: none; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="social"> 
 
    <a>SHARE</a> 
 
</div> 
 
<div class="social-icons"> 
 
    <a>FB</a> 
 
    <a>TW</a> 
 
    <a>G+</a> 
 
    <a>WS</a> 
 
</div>

Answer 2

ändern

display: inline-block; 

zu

float: left; 

Answer 3

Ändern Sie die display Eigenschaften von .social, .social-Icons float:left. Heres der Arbeits Fiddle

Answer 4

Ich sage nicht, dass ich mit Ihrer Technik stimmen, aber das sollte es tun:

.social{ 
    display: block; 
    width:46px; 
    height: 47px; 
    color: #58585b; 
    font-family: "freight-text-pro",sans-serif; 
    text-transform: uppercase; 
    font-size: 14px; 
    line-height: 47px; 
    padding: 0px 20px; 
    border: 1px solid rgba(88,88,91,0.5); 
    transition:width .2s ease; 
    -webkit- transition:width .2s ease; 
    float:left; 
} 

.social-icons{ 
    display:none; 
    width:100px; 
    height: 47px; 
    color: #58585b; 
    font-family: "freight-text-pro",sans-serif; 
    text-transform: uppercase; 
    font-size: 14px; 
    line-height: 47px; 
    padding: 0px 20px; 
    border: 1px solid rgba(88,88,91,0.5); 
    margin-left: 88px; 
}