0

jQueryでいくつかの問題に直面しています。IE と Firefox ではすべて正常に動作しますが、chrome では奇妙な動作が発生します。「 ( ) を 1 回クリック (4 回クリック) すると#top_slider_menu突然画像が消えます。jQueryとHTMLid="img_slide_currentのコードの下を見つけてください。また、すべてのブラウザで効果がないということは、<h5>fadeOutfadeIn

スクリプト コード:

<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 に答える