切换宽度更改（jQuery）

Question

我创建了一个iPhone消息布局，并希望在单击按钮时切换<div>。问题是当这个<div>被切换时，我需要消息width减少，所以一切都符合要求。我试过这个代码，但它不起作用：

$('.my-post .fa-chevron-left').click(function(){
  $('.controls').toggle();
          var toggleWidth = $(".message .mine").width() == 430 ? "350px" : "430px";
        $('.message .mine').animate({ width: toggleWidth });
});

/* -- POST INFO -- */
  .info2 {
  width:500px;
    height: auto;
    margin-bottom: 10px;
    height: auto;
  }
  .reblogged img{
      border-radius:5px;
      vertical-align:middle;
  }
  .reblogged.source img{
      float:right;
  }
.my-post{
  overflow:hidden;
  display:inline-block;
  background:#fff;
  padding:5px;
}
.my-post .fa-chevron-left{
  cursor:pointer;
  vertical-align:middle;
  font-size:12px;
  padding:5px;
  background:#aaa;
  color:#fff;
  border-radius:5px
}
.message i{
  font-size:12px;
  color:#fff;
  padding:5px;
  float:right;
  border-radius:100%;
  background:#37ce00;
}
  
.message
{
position: relative;
display: inline-block;
width: 440px;
height: 20px;
line-height:20px;
padding: 5px;
margin-left:15px;
background: #58acfa;
color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 6px;
}
  .reblogged.source{
     margin-bottom:5px; 
  }

.message:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 8px 10px 8px 0;
border-color: transparent #58acfa;
display: block;
width: 0;
z-index: 1;
left: -10px;
top: 7px;
}

.message.via{
    background:#dadada;
    color:#000;
}
.message.via:after{
    border-color: transparent #dadada;
}
.message.source{
    text-align:right;
    margin-left:0;
    margin-right:15px;
}
.message.source:after{
    border-width: 8px 0 8px 10px;
    left:auto;
    right:-10px;
}
.message.mine{
  width:430px;
  color:#303030;
  background:#fff;
  border:1px solid #dadada;
  border-radius:15px
}
.message.mine:after{
  display:none
}

  /*-- PERMALINK, LIKE AND REBLOG BUTTONS --*/

.controls{
  float:left;
  line-height:25px;
    width:auto;
    height:auto;
}

.controls .reblog a:hover{
    color:#fe9a2e;
}
.controls .permalink a:hover{
    color:#ffde07;
}

.controls li{
    display:inline-block;
    vertical-align:middle;
    width:17px;
    height:17px;
        margin-left:10px;
    text-align:center;
    position:relative;
}

.controls li a{
    display:block;
    font-size:14px;
    color:{color:Post Icons};
}

.custom-like-button{
    position:relative;
    width:10px;
    height:10px;
}

.like_button{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index:10;
}

.like_button iframe{
    width: 100%!important;
    height: 100%!important;
}

.like-button-heart{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.like_button:hover + .like-button-heart{
    color: red;
}

.like_button.liked + .like-button-heart{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="info2">

<div class="reblogged source">
<a href="{ReblogRootURL}" target=blank title="{ReblogRootTitle}">
  <img src="{ReblogRootPortraitURL-30}"/></a>
  <div class="message source">This is my original work!</div>
</div>

<div class="reblogged via">
  <a href="{ReblogParentURL}" target=blank title="{ReblogParentTitle}">
  <img src="{ReblogParentPortraitURL-30}"/></a>
  <div class="message via">I enjoyed this post and reposted it!</div>
</div>
  
<div class="my-post">

  <!-- controls -->
<div class="controls">
<li class="custom-like-button"><a class="like-button-heart"><span class="fa fa-heart-o"></span></a></li>
<li class="reblog"><a href="{ReblogURL}" target="_blank" class="reblog-button"><span class="fa fa-retweet"></span></a></li>
<li class="permalink"><a href="{Permalink}" class="permalink-button"><span class="fa fa-bookmark-o"></span></a></li>
  </div><!-- End controls -->
  
  
  <i class="fa fa-chevron-left"></i>
  <div class="message mine">So did I and {NoteCount} others!<i class="fa fa-arrow-up"></i></div>
</div>

</div><!-- End info2 -->

感谢您的帮助！

PS：codepen

Answer 1

你可以尝试改变如下。它有效here

$('.my-post .fa-chevron-right').click(function(){
  $('.controls').toggle();
  $('.my-post .fa-chevron-right').toggleClass('active');
        var toggleWidth = ($(".message.mine").width() == 430) ? "370px" : "430px";
        $('.message.mine').animate({ width: toggleWidth });
});