JQueryとCSSを使ってディビジョンを拡大/縮小する

Question

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

感謝!!!!本当にありがとう！

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

万一work.Iは、あなたが使用した画像にid="img"を追加しました。お役に立てれば！任意の属性を追加/削除/編集することができます。 CSS全体の部分も削除しました（.MBT-CSS3 :hover）。 'MBT-CSS3'クラスのために編集されました。申し訳ございません。

Answer 2

最初の問題は:hoverです。何が起こるかは、アニメーションが再生され、新しい次元/位置のために要素の上を浮遊しなくなりました。したがって、ホバーは除去され、サイクルが繰り返されます。

Answer 3

THINKSは役に立ちましたか？私は実際に最初の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; */ 
} 

、それがとてもうまくいきました。私は本当にあなたのすべての時間に感謝し、これで助けて！あなたは素晴らしいです！