クロムのjqueryのCSSの問題

Question

まず、私のdivを見てみましょう。

<div data-category="news" class="element news isotope-item loadimg" style="position: absolute; opacity: 1; -moz-transform: scale(1); left: 20px; top: 20px; height: auto; overflow: visible; width: auto; background-color: rgb(0, 0, 0);"> 
      <div id="1" class="load_cont"></div> 
      <p class="number">1</p> 
      <div class="element_content"> 
        <div class="thumb"> 
         <img src="assets/website/news2.jpg" id="myImage">   
         <img style="display: none;" src="assets/ajax-loader.gif" id="prg1"> 
         <div class="date_entry"> 14 may 2011</div> 
         <div class="title news">TEST 1</div> 
        </div> 
      </div> 
     </div> 

私はdivの上にカーソルを移動すると、IMGは、親指の内側に、DIVの背景を消えると明らかになっています。

.element_content .thumb:hover img { 
opacity:.0; /*FF/OPERA/Chrome*/ 
filter: alpha(opacity=0); /*IE 5-7*/ 
    -webkit-transition-duration: 0.1s; 
    -moz-transition-duration: 0.1s; 
      transition-duration: 0.1s; 
} 

今AjaxのプリローダーとCSSの変更は、Firefoxが、doesnの中ではかなりうまく機能し、私はdiv要素をクリックした場合、それは負荷になり、コンテンツajax.The事を経由して、基本的にはjqueryの一部を、来ます私はajaxの部分を削除しない限り、IEとChromeで全く表示されません。

$('#container').find('.element').click(function(){ 
       if($(this).hasClass('large')){ 
       return ; 
      } 

      var url="item_detail.php?"; 
      var code=$(this).children().first().attr("id"); 





     //the portion below this point works well in FF but not in IE or Chrome 
      $("#"+code).append("<img style='background-color:transparent;' src='assets/ajax-loader.gif'>"); 
      $("#"+code).css({ 
      "position":"absolute", 
      "top":""+(($("#"+code).parent().height()/2)-27)+"px", 
      "left":""+(($("#"+code).parent().width()/2)-27)+"px", 
      "z-index":"2", 
      }); 
      var e_code = $("#"+code); 
      var e_cont = $('.element_content',this); 
      e_cont.css({"opacity":"0.3","filter":"alpha(opacity = 30)","zoom":"1"}); 
      e_cont.find('.thumb img').css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"}); 

      var url="item_detail.php?code="+code; 





      //If I turn off everything below this point, the preloader appears correctly in chrome and IE, otherwise it seems, the css changes above and the preloader thing don't have any effect in browsers other than firefox. 
      var httpRequest = new XMLHttpRequest(); 

      httpRequest.open('POST', url, false); 

      httpRequest.send(); // this blocks as request is synchronous 
      if (httpRequest.status == 200) { 

       e_code.css({ 
        "position":"static" 
       }); 
       e_cont.html(''); 
       e_cont.css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"}); 

       $previousLargeItem.html(oldhtml); 
       $previousLargeItem.css({'height':'auto','width':'auto'}); 
       var res=httpRequest.responseText; 
       $('#'+code).html(res); 
      } 


     }); 

Answer 1

私は正確に何をしたいのか分かりません。 しかし、多分それはあなたを助けることができ、このコードを試してみてください。
http://jsbin.com/iserac/11

遷移作品。間隔を広げるだけです。

.element_content .thumb img { 
    opacity:1; 
    -webkit-transition: opacity 0.5s; 
     -moz-transition: opacity 0.5s; 
      transition: opacity 0.5s; 
    } 
    .element_content .thumb:hover img { 
    opacity:0; /*FF/OPERA/Chrome*/ 
    filter: alpha(opacity=0); /*IE 5-7*/ 

    } 

ajax呼び出しにjQuery ajax apiを使用してみてください。

Answer 2

実際の問題は、クロムを凍らせたが、何らかの理由で、Firefoxでコードを実行し続けた非同期の偽物であることが判明しました。私はasynch trueを使用し、成功イベントコールで後のコードを動かすことでそれを解決しました。