2013-07-03 37 views
0

我面臨着一些問題與jQuery的,一切都正常工作與IE和Firefox,但鍍鉻有一些奇怪的行爲:「當我點擊更多,然後點擊(四個時間點擊)上(#top_slider_menu)突然消失圖像id="img_slide_current ,找到下面的代碼爲jQuery的HTML以及 另外,<h5>不是在所有的瀏覽器實現我的意思是fadeOutfadeIn谷歌瀏覽器中的jQuery問題?淡入和淡出

腳本代碼:

<br> <br> <br> <br> 

var in_work = false; 

var fadeOutSpeed = 400; 

var fadeInSpeed = 600; 

var work_time = (fadeInSpeed + fadeOutSpeed) * 0 ; 


function sliderChangeImage(targetId) { 

if (in_work) return 
else{ 
    in_work = true; 
    current_slide_number = targetId; 
} 

setTimeout(function() { 
    in_work = false; 
}, work_time); 
targetSrc = $("#img_slide_" + targetId).attr("src"); 
targetH = $("#slide_h5_" + targetId).text(); 
targetP = $("#slide_p_" + targetId).text(); 
var new_href = $('.top_slide'+targetId+' .slideshow_sideH a').attr('href'); 
cl = $(this).attr('class'); 
$("#top_slider_menu #1").attr('class', ''); 
$("#top_slider_menu #2").attr('class', ''); 
$("#top_slider_menu #3").attr('class', ''); 
$("#top_slider_menu #" + targetId).attr('class', 'active'); 
$("#img_slide_current").fadeOut(fadeOutSpeed, function() { 
    $(this).load(function() { 
     $(this).fadeIn(fadeInSpeed); 

    }); 
    $("#img_slide_current").attr("src", targetSrc); 
}); 
$(this).load(function() { 
     $(this).fadeIn(fadeInSpeed); 
    }); 
$(".slideshow_side").fadeIn(fadeInSpeed); 
$("#slide_h5_current").fadeIn(fadeInSpeed, function() { 
    $(this).text(targetH).fadeIn(fadeInSpeed) 
    ; 
}); 
$("#slide_p_current").fadeOut(fadeOutSpeed, function() { 
    if ($(window).width() > 980) { 
     $(this).text(targetP).fadeIn(fadeInSpeed); 
    } 
    $('.top_slide_current a').attr('href', new_href); 

}); 
$(".slideshow_side").fadeIn(fadeInSpeed); 

}

HTML代碼:

<div class="flexslider"> 
     <ul id="top_slider_menu"> 
      <li id="li_1"><a id="1" class="active" href="">Lorem ipsum hr<br>Consectetur adi <span class="slide_arrow"><img src="img/slide_arrow.png" /></span></a></li> 
      <li id="li_2"><a id="2" class="" href="">Lorem ipsum hr<br>Consectetur adi<span class="slide_arrow"><img src="img/slide_arrow.png" /></span></a></li> 
      <li id="li_3"><a id="3" class="" href="">Lorem ipsum hr<br>Consectetur adi<span class="slide_arrow"><img src="img/slide_arrow.png" /></span></a></li> 
     </ul> 
     <div class="top_slide_current"> 
      <div class="img"> 
       <img id="img_slide_current" src="img/slideshow/slide1.jpg" /> 
      </div> 
      <div class="slideshow_side"> 
       <a href="#"><h5 id="slide_h5_current">Lorem ipsum dolor sit amet</h5></a> 
       <p id="slide_p_current"> 1 ad meis suscipiantur qui, sit fugit laudem ne. Posse adipiscing cum id, sed ut option oblique concludaturque. Te integre alienum nec, ut vocibus epicuri mel, ei ignota feugait vix. Cum at paulo tantas concludaturque, vim ei fugit feugiat ornatus, ei ornatus recusabo liberavisse has. His modo volumus dissentias in, vis homero legere oportere id. Accumsan indoctum usu ad, sint omnesque eu sit. Vim ad exerci dolore integre, per liber possit alienum ad, no his quod quot eligendi.</p> 
       <a id="top_slide_a" href="#">Read More</a> 
      </div> 
      </div> 
     <div class="top_slide1 hidden"> 
      <div class="img"> 
      <img id="img_slide_1" src="img/slideshow/slide1.jpg" /> 
      </div> 
      <div class="slideshow_sideH"> 
      <h5 id="slide_h5_1">Lorem ipsum dolor sit amet,</h5> 
      <p id="slide_p_1">1 ad meis suscipiantur qui, sit fugit laudem ne. Posse adipiscing cum id, sed ut option oblique concludaturque. Te integre alienum nec, ut vocibus epicuri mel, ei ignota feugait vix. Cum at paulo tantas concludaturque, vim ei fugit feugiat ornatus, ei ornatus recusabo liberavisse has. His modo volumus dissentias in, vis homero legere oportere id. Accumsan indoctum usu ad, sint omnesque eu sit. Vim ad exerci dolore integre, per liber possit alienum ad, no his quod quot eligendi.</p> 
       <a href="#">Read More</a> 
      </div> 
     </div> 
     <div class="top_slide2 hidden"> 
      <div class="img"> 
      <img id="img_slide_2" src="img/slideshow/slide2.jpg" /> 
      </div> 
      <div class="slideshow_sideH"> 
      <h5 id="slide_h5_2">Lorem ipsum dolor sit amet,</h5> 
      <p id="slide_p_2">2 ad meis suscipiantur qui, sit fugit laudem ne. Posse adipiscing cum id, sed ut option oblique concludaturque. Te integre alienum nec, ut vocibus epicuri mel, ei ignota feugait vix. Cum at paulo tantas concludaturque, vim ei fugit feugiat ornatus, ei ornatus recusabo liberavisse has. His modo volumus dissentias in, vis homero legere oportere id. Accumsan indoctum usu ad, sint omnesque eu sit. Vim ad exerci dolore integre, per liber possit alienum ad, no his quod quot eligendi.</p> 
       <a href="#">Read More</a> 
      </div> 
     </div> 
     <div class="top_slide3 hidden"> 
      <div class="img"> 
      <img id="img_slide_3" src="img/slideshow/slide3.jpg" /> 
      </div> 
      <div class="slideshow_sideH"> 
      <h5 id="slide_h5_3">Lorem ipsum dolor sit amet,</h5> 
      <p id="slide_p_3">3 ad meis suscipiantur qui, sit fugit laudem ne. Posse adipiscing cum id, sed ut option oblique concludaturque. Te integre alienum nec, ut vocibus epicuri mel, ei ignota feugait vix. Cum at paulo tantas concludaturque, vim ei fugit feugiat ornatus, ei ornatus recusabo liberavisse has. His modo volumus dissentias in, vis homero legere oportere id. Accumsan indoctum usu ad, sint omnesque eu sit. Vim ad exerci dolore integre, per liber possit alienum ad, no his quod quot eligendi.</p> 
       <a href="#">Read More</a> 
      </div> 
     </div> 

回答

0

嘗試增加.stop()調用逝去之前,即

$(".slideshow_side").stop().fadeIn(fadeInSpeed); 

這應該停止隊列中的所有先前的喧鬧和觸發最新一期。

+0

同樣的問題不能正常工作:( – Mohasa