动画

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;
 }