文本外部div動畫

Question

請檢查：http://fiddle.jshell.net/dyft6zs6/

我試圖創建幾個框;第一個將包含一些文本，第二個包含一個圖像。

動畫之前，文本自適應div的寬度並且不包含div。任何人都可以引導我？非常感謝。

(function($){ 
 
    $.fn.myfunction = function() { 
 
     $('#col1').toggleClass('span12 span3'); 
 
     $('#col2').toggleClass('span0 span9'); 
 
    }; 
 
}); 
 

 
$('#cont').on('hover', function(){ 
 
     $('#col1').toggleClass('span12 span3'); 
 
     $('#col2').toggleClass('span0 span9'); 
 
}); 
 

 

 
CSS:

.row-fluid div { 
 
    height: 200px; 
 
    -webkit-transition: width 0.3s ease, margin 0.3s ease; 
 
    -moz-transition: width 0.3s ease, margin 0.3s ease; 
 
    -o-transition: width 0.3s ease, margin 0.3s ease; 
 
    transition: width 0.3s ease, margin 0.3s ease; 
 
} 
 

 
.row-fluid .span0 { 
 
    width: 0%; 
 
} 
 

 
#col1 { 
 
    background-color: #A6BFBA; 
 
} 
 

 
#col2 { 
 
    background-color: #DE4124; 
 
} 
 

 
#trig { 
 
    margin: 50px; 
 
} 
 

 
.row-fluid .span0 + [class*="span"]{ 
 
    margin-left: 0; 
 
} 
 

 
HTML:

<div class="container-fluid"> 
 
    <div class="row-fluid" id="cont"> 
 
     <div id="col2" class="span0"> 
 
      <p>some textsome textsome textsome texts</p> 
 
     </div> 
 
     <div id="col1" class="span12"> 
 
      <img src="http://assets.servedby-buysellads.com/p/manage/asset/id/29408" class="img-responsive"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

/*replace the width of .row-fluid .span0 {width: 0;} to */ 
 

 

 
.row-fluid .span0 { 
 
width:auto; 
 
}