Javascript 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();
        }

    }

基本上，我试图打开和关闭一个动画“联系我们”分区。打开时，我希望图像切换到关闭图像，关闭时反之亦然

我遇到的问题是，图像会按要求切换，但只会在一瞬间切换，因为sliderstate变量现在已经更改了“else if”，它也会出现并再次更改图像！我已经尝试使用超时来修复，这在除Chrome之外的所有broswers中都有效

收到任何建议

干杯

---

Paul

您难道不能将图像切换放在if/else块中，并消除设置超时的需要吗

---

根据编码怪胎的回答，以下内容对我有效

$(".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");});

       });

---

干杯-对切换方法做了一些研究，并在下面开始工作

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();
    }
};

$(".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");});

       });