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的切换状态问题

回答

相关问题