使用 JQuery 和 CSS 扩展/缩小 Div答案

【问题标题】：Expanding/Shrinking a Div using JQuery and CSS使用 JQuery 和 CSS 扩展/缩小 Div
【发布时间】：2011-05-17 20:47:07
【问题描述】：

我正在尝试使用 JQuery 和 CSS 让用户在不同大小的图像“墙”中导航。

基本上，当用户将鼠标悬停在图像上时，我希望它展开（目前正在工作）并且我希望 div 也增加宽度，以显示一些额外的信息。出于某种原因，当我将鼠标悬停在这一点时，会有一些非常时髦的行为，当我鼠标移出时，图像会完全关闭。我有一种感觉，我在某个地方错过了一个“停止”，但我不知道在哪里。有人可以看看吗？

JQuery:

jQuery(function($){
                $('.bar').mosaic({
                    animation   :   'slide'
                });
            });

HTML：

<div class="MBT-CSS3">
        <!--Bar-->
        <div class="mosaic-block bar">
            <a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">

                    <h4>This video is really cool!  Click to watch more!</h4>
                    <p>by Media Innovation Team</p>

            </a>


            <!-- <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/> -->
            <img src="img/grad1.png"/>

        </div>
  </div>

        <div class="clearfix"></div>

CSS

.MBT-CSS3 div{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
/*opacity: 0.5;
z-index: 1;*/
position:relative;
overflow:hidden;
background-color:#000;
width: auto;
height: auto;
/*margin: 0 10px 5px 0; */
}
.MBT-CSS3 div:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
/*box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray; */
opacity: 1;
z-index: 100;
width:600px;
/*height:250px; */  
}

感谢任何可以提供帮助的人！！！！非常感谢您的宝贵时间！

【问题讨论】：

您使用的是 jQuery 插件？您可能想在您的问题中提及这一点。此外，发布JSFiddle 示例可能会为您提供更多帮助。
哇，这确实很时髦...我把它放在 jsfiddle 中玩。 jsfiddle.net/dlikhten/QqFrj/1
仅供参考，Dmitriy 发布的 JSFiddle 在 Safari 中运行不佳。至少可以说“时髦”……它到处乱跳。

标签： jquery css html expand

【解决方案1】：

试试这个：

                $(document).ready(function(){
          var busy = 0;
          $('.MBT-CSS3').mouseover(function(){
              if(!busy)
                  {
                      busy = 1;                      
                    $('#img').animate({
                   '-webkit-transform':'scale(1.1)',
                    '-moz-transform':'scale(1.1)',
                    '-o-transform':'scale(1.1)',
                    'opacity': '1',
                    'z-index': '100',
                    'width' : '600'
                  }, function(){busy = 0;});
                  }
          });
          $('.MBT-CSS3').mouseout(function(){
          if(!busy)
              {
                  busy = 1;                      
                    $('#img').animate({
                   '-webkit-transform':'scale(.7)',
                    '-moz-transform':'scale(.7)',
                    '-o-transform':'scale(.7)',
                    'opacity': '0.5',
                    'z-index': '1',
                    'width' : '300'
                  }, function(){busy = 0;});
              }
          });
      });

应该可以。我确实在您使用的图像中添加了id="img"。希望这可以帮助！您可以根据需要添加/删除/编辑任何属性。也删除了 CSS 的整个 .MBT-CSS3 :hover 部分。为整个'MBT-CSS3' 班级编辑，抱歉:)

【讨论】：

【解决方案2】：

您的第一个问题是:hover。发生的情况是动画播放并且由于新的尺寸/位置，您不再将鼠标悬停在元素上。因此，悬停被移除，循环重复。

【讨论】：

【解决方案3】：

非常感谢您的帮助。实际上，我只是通过设置初始 div 的特定宽度和高度来实现它。

虽然我确实有：

position:relative;
overflow:hidden;
background-color:#000;
width: auto;
height: auto;
/*margin: 0 10px 5px 0; */
}

我改成：

position:relative;
overflow:hidden;
background-color:#000;
width: 350;
height: 250;
/*margin: 0 10px 5px 0; */
}

而且效果很好。我真的很感谢你所有的时间和帮助！你们太棒了！

【讨论】：