0

我在使用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>
4

1 回答 1

0

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

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

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

于 2013-07-03T21:56:01.277 回答