使用JQuery和CSS扩展/缩小Div

我正在尝试使用JQuery和CSS来允许用户浏览不同大小图像的“墙”。使用JQuery和CSS扩展/缩小Div

基本上，当用户将鼠标悬停在图像上时，我希望它展开（当前正在工作），并且我希望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; */ 
}

由于任何人可能能够帮助!!!!我非常感谢你的时间！

来源

2011-05-17 Clink

你正在使用jQuery插件？你可能想在你的问题中提到这一点。另外，发布[JSFiddle]（http://www.jsfiddle.net）示例可能会为您提供更多帮助。 – Sparky 2011-05-17 20:53:33

哇，这确实是时髦的...我把它放在jsfiddle玩耍。 http://jsfiddle.net/dlikhten/QqFrj/1/ – 2011-05-17 20:53:40

只是一个fyi，由Dmitriy发布的JSFiddle在Safari中工作不太好。 “质朴”至少可以说......它四处跳跃。 – Sparky 2011-05-17 20:57:34

试试这个：

   $(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"到你所使用的图像。希望这可以帮助！您可以随意添加/删除/编辑任何属性。也删除了整个.MBT-CSS3 :hover部分的CSS。编辑整个'MBT-CSS3'类，对不起:)

来源

2011-05-17 21:37:15 Uxxish

嘿家伙非常感谢您的帮助！ – Clink 2011-05-18 14:38:21

你的第一个问题是:hover。会发生什么情况是动画会播放，并且由于新的尺寸/位置，您不再徘徊在元素上方。因此悬停被删除，循环重复。

来源

2011-05-17 20:55:09

谢谢你的帮助。我实际上通过设置初始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; */ 
}

和它的工作很大。我真的很感激你的时间和帮助！你们真棒！

来源

2011-05-18 14:40:52 Clink

使用JQuery和CSS扩展/缩小Div

回答

相关问题