javascript - Google Chrome 中的 jQuery 问题？淡入淡出

Question

我在使用 jQuery 时遇到了一些问题，在 IE 和 Firefox 上一切正常，但在 chrome 上有一些奇怪的行为“当我在 ( #top_slider_menu 上单击更多然后单击一次(四次单击)时) 突然消失图像 id="img_slide_current ，在下面找到 jQuery 和 HTML 的代码。 还有 <h5>在所有浏览器中都没有效果我的意思是fadeOut和 fadeIn

脚本代码:

<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>

Answer 1

尝试在调用淡入淡出之前添加 .stop() ，即

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

这应该会停止队列中所有先前的动画并触发最新的动画。