jQuery的切換狀態問題

我在用下面的代碼有問題 -jQuery的切換狀態問題

function slideContactDetails() { 


     if (sliderState == "closed") { 
      $(".sliderBlock").animate({width:400}, 'slow',function() {$("div.sliderForm").fadeIn("fast"); }); 
      sliderState = "open"; 
      setTimeout(function(){switchImg("first")},300); 


     } 
     else if (sliderState =="open") { 
      $(".sliderBlock").animate({width:0}, 'slow',function() {$("div.sliderForm").fadeIn("fast"); }); 
      sliderState="closed"; 
      setTimeout(function(){switchImg("second")},300); 

     } 

    }; 

var firstState = "images/closeTab.png"; 
    var secondState = "images/contact_us.png" 
    function switchImg(imgNo){ 
     if (imgNo == "first"){ 
      $('.contactBtnBtn img').attr("src", firstState); 
      $('.sliderBlockForm').show(); 
     } 
     else if (imgNo == "second"){ 
      $('.contactBtnBtn img').attr("src", secondState); 
      $('.sliderBlockForm').hide(); 
     } 

    }

基本上我試圖打開和關閉動畫「聯繫我們」的div。打開時，我希望圖像切換到近距離圖像，反之亦然。

我遇到的問題是圖像會按照要求切換，但只是在瞬間變化，因爲sliderstate變量現在已經改變了'else if'，它也會動作並將圖像再次改回！我試圖修復使用超時，這適用於所有除了Chrome瀏覽器！

任何建議大大收到！

乾杯保羅

來源

2011-06-16 Dancer

$("div.sliderForm").click(
    $(this).toggle('slow'); 
);

來源

2011-06-16 11:45:27

乾杯 - 做了一些研究切換方法，得到了以下工作 – Dancer 2011-06-16 14:52:59

如果這個答案是有益的，然後不要忘記將其標記爲正確的... – 2011-06-16 15:53:26

無法您只需將圖像中的if/else塊切換，並刪除了setTimeout()的需要？

function slideContactDetails() { 
    if (sliderState == "closed") { 
     $(".sliderBlock").animate({ 
      width: 400 
     }, 'slow', function() { 
      $("div.sliderForm").fadeIn("fast"); 
     }); 
     sliderState = "open"; 
     $('.contactBtnBtn img').attr("src", firstState); 
     $('.sliderBlockForm').show(); 
    } else { 
     $(".sliderBlock").animate({ 
      width: 0 
     }, 'slow', function() { 
      $("div.sliderForm").fadeIn("fast"); 
     }); 
     sliderState = "closed"; 
     $('.contactBtnBtn img').attr("src", secondState); 
     $('.sliderBlockForm').hide(); 
    } 
};

來源

2011-06-16 11:48:29

乾杯馬克 - 我試過，但沒有運氣！ – Dancer 2011-06-16 14:52:34

以下爲我編寫的基於Coding Freaks的答案。

$(".sliderBlock").hide(); 

     $('img.slider').toggle(
     function() 
     { 

      $(".sliderBlock").animate({width:400}, 'slow',function() {$('.contactBtnBtn img').attr("src", "images/closeTab.png");$('.sliderBlockForm').show();}); 


     }, 
     function() 
     {  
      $('.sliderBlockForm').hide(); 

      $(".sliderBlock").animate({width:0}, 'slow',function() {$('.contactBtnBtn img').attr("src", "images/contact_us.png");}); 

     });

來源

2011-06-16 14:54:01 Dancer

jQuery的切換狀態問題

回答

相關問題