Question

我遇到以下代码的问题 -

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。打开时，我希望图像切换到关闭图像，反之亦然。

我遇到的问题是图像按要求切换，但只是一瞬间，因为幻灯片变量现在已经改变'else if'也会出现动作并再次改变图像！我试图修复使用超时，这适用于除Chrome之外的所有broswers！

任何建议都很受欢迎!!

干杯保罗

Answer 1

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

Answer 2

您是否只能将图片切换放在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();
    }
};

Answer 3

根据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");});

       });

Jquery Toggle声明问题

3 个答案: