Question

以下代码将框扩展到右侧，但我想将其放下/底部。什么属性需要改变？任何的想法？请注意我想要的动画风格与现在一样Live Example Fiddle

HTML：

<div>On Mouse Over/Out Expand/Contract Div Container</div><br>
<div class='main'>
    <div class='activator'>
        <div class="img">[img]</div>
        <div class="content">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paradigm shifts and focusing on core suitability and cross-training.</div>
    </div>
</div>

CSS：

.main {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.main .activator {
    height: 200px;
    width: 200px;
    float: left;
    display: block;
}
.img {
    border: 1px solid maroon;
    text-align: center;
    margin: 15px;
    height: 168px;
    width: 168px;
    float: left;
}
.content {
    display: none;
    margin: 15px;
}
.activator:hover {
    width: 500px;
}
.activator:hover .content {
    display: block;
}
.activator:hover .img {
    float: left;
}

Jquery的：

$('.main').hover(function() {
    $(this).animate({
        width: '500px'
    }, 300);
}, function() {
    $(this).animate({
        width: '200px'
    }, 300);
});

Answer 1

我修改了你的代码以使其向下工作。

＆＃13;

$('.main').hover(function() {
    $(this).animate({
        height: '500px'
    }, 300);
}, function() {
    $(this).animate({
        height: '200px'
    }, 300);
});

＆＃13;

.main {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.main .activator {
    height: 200px;
    width: 200px;
    float: left;
    display: block;
}
.img {
    border: 1px solid maroon;
    text-align: center;
    margin: 15px;
    height: 168px;
    width: 168px;
}
.content {
    margin: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>On Mouse Over/Out Expand/Contract Div Container</div><br>
<div class='main'>
    <div class='activator'>
        <div class="img">[img]</div>
        <div class="content">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paradigm shifts and focusing on core suitability and cross-training.</div>
    </div>
</div>

＆＃13;

Answer 2

请试试这个。没有jQuery也可以这样做。

＆＃13;

.main {    
  width: 200px;
  border: 1px solid black;
  overflow: hidden;
  -webkit-transition:all 0.5s linear;
  transition:all 0.5s linear;  
  height:200px;
}
.main .activator {   
  width: 200px;
  float: left;
  display: block;
}
.img {
  border: 1px solid maroon;
  text-align: center;
  margin: 15px;
  height: 168px;
  width: 168px;   
}
.content {   
  opacity:0;
  margin: 15px;
  -webkit-transition:all 0.5s linear;
  transition:opacity 0.5s linear;    
}
.activator:hover .content {   
  opacity:1;    
}
.main:hover{
  height:500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>On Mouse Over/Out Expand/Contract Div Container</div><br>
<div class='main'>
    <div class='activator'>
        <div class="img">[img]</div>
        <div class="content">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paradigm shifts and focusing on core suitability and cross-training.</div>
    </div>
</div>

＆＃13;

将动画扩展到不利方面

2 个答案: