我努力讓這個jQuery的滑下來，並開始工作

Question

我在jquery中動畫的div應該滑出來擴大寬度。我已經得到了寬度動畫工作，但加入了slideDown之後和代碼沒有什麼作品，它應該工作的方式是：

查詢，可點擊，它擴展，它擴展了之後。對於幻燈片並再次單擊時，首先將叉子向上滑動，然後「查找」顯示回到其原始寬度。

我不知道在我的代碼錯了，因爲我是新來的jQuery和Java腳本。感謝您的任何幫助！

//-----------ENQUIRY-FORM---------- 
 

 
$('#enquiry-shown').click(function() { 
 
    $(this).animate({ 
 
    width: "950px", 
 
    borderRadius: "0px" 
 
    }, 1000); 
 

 
    setTimeout(function() { 
 
    $('#enquiry-form').slideDown('slow'); 
 
    }, 1000); 
 

 
    function() { 
 
    if ($('#enquiry-form').is("visible") { 
 
     $('#enquiry-form').slideUp("slow"); 
 

 
     else($('#enquiry-form').is("hidden") { 
 
      $('#enquiry-form ').slideDown("slow"); 
 
     }); 
 

 
     }); 
 
    }; 
 

 
});

/*--------ENQUIRIES---------*/ 
 

 
#enquiry-container { 
 
    text-align: center; 
 
    margin-bottom: 25px; 
 
} 
 

 
#enquiry-shown { 
 
    background-color: white; 
 
    padding: 10px 0; 
 
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3); 
 
    width: 210px; 
 
    border: solid 1px #d8d8d8; 
 
    border-radius: 50px; 
 
    margin: 0 auto; 
 
} 
 

 
#enquiry-name { 
 
    font-family: "calibri light"; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    margin: 0; 
 
    display: inline; 
 
    padding: 0 0 0 10px; 
 
} 
 

 
#enq-arrowdown { 
 
    width: 25px; 
 
    height: 16px; 
 
    float: right; 
 
    padding: 10px 19px 0 0; 
 
    display: inline-block; 
 
} 
 

 
#enquiry-form { 
 
    width: 950px; 
 
    height: 400px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    display: none; 
 
    border-bottom: solid 1px #d8d8d8; 
 
    border-right: solid 1px #d8d8d8; 
 
    border-left: solid 1px #d8d8d8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="enquiry-container"> 
 
    <div id="enquiry-shown"> 
 
    <h2 id="enquiry-name">Enquiries</h2> 
 
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png"> 
 
    </div> 
 
    <div id="enquiry-form"> 
 
    </div> 
 
</div>

Answer 1

我改變了我幾件事情在你的js代碼，我用一個類來定義條件時，效果基本show或向下

看到的結果是：

//-----------ENQUIRY-FORM---------- 
 

 
$('#enquiry-shown').click(function() { 
 

 
    var current = $(this) 
 

 
    if ($('#enquiry-shown').hasClass("active")) { 
 

 
    $('#enquiry-form').slideUp('slow', function() { 
 
     current.animate({ 
 
     width: "210px", 
 
     borderRadius: "50px" 
 
     }, 1000); 
 
    }); 
 

 
    $('#enquiry-shown').removeClass("active"); 
 

 

 
    } else { 
 
    current.animate({ 
 
     width: "100%", 
 
     borderRadius: "0px" 
 
    }, 1000, function() { 
 
     $('#enquiry-form').slideDown('slow'); 
 
    }); 
 

 
    $('#enquiry-shown').addClass("active"); 
 
    } 
 

 

 
});

/*--------ENQUIRIES---------*/ 
 

 
#enquiry-container { 
 
    text-align: center; 
 
    margin-bottom: 25px; 
 
} 
 

 
#enquiry-shown { 
 
    background-color: white; 
 
    padding: 10px 0; 
 
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3); 
 
    width: 210px; 
 
    border: solid 1px #d8d8d8; 
 
    border-radius: 50px; 
 
    margin: 0 auto; 
 
} 
 

 
#enquiry-name { 
 
    font-family: "calibri light"; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    margin: 0; 
 
    display: inline; 
 
    padding: 0 0 0 10px; 
 
} 
 

 
#enq-arrowdown { 
 
    width: 25px; 
 
    height: 16px; 
 
    float: right; 
 
    padding: 0px 20px 0 0; 
 
    display: inline-block; 
 
    transition: all 1s; 
 
    transform: rotate(-90deg); 
 
} 
 

 
#enquiry-form { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    display: none; 
 
    border-bottom: solid 1px #d8d8d8; 
 
    border-right: solid 1px #d8d8d8; 
 
    border-left: solid 1px #d8d8d8; 
 
} 
 

 
#enquiry-shown.active img { 
 
    transform: rotate(0deg); 
 
    padding-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="enquiry-container"> 
 
    <div id="enquiry-shown"> 
 
    <h2 id="enquiry-name">Enquiries</h2> 
 
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png"> 
 
    </div> 
 
    <div id="enquiry-form"> 
 
    This is the enquiry form 
 
    </div> 
 
</div>

Answer 2

我不知道如果u要達到這種效果，但試試這個，給我的反饋：

$('#enquiry-shown').click(function() { 

    if($('#enquiry-form').is(':visible')){ 
    $('#enquiry-form').slideUp('slow', function(){ 
     $('#enquiry-shown').animate({ 
     width: "210px", 
     borderRadius: "50px" 
     }, 1000); 
    }); 
    } 
    else if($('#enquiry-form').is(':hidden')){ 
    $('#enquiry-shown').animate({ 
     width: "950px", 
     borderRadius: "0px" 
    }, 1000, function(){ 
     $('#enquiry-form').slideDown('slow'); 
    }); 
    } 
}); 

Answer 3

你有很多語法錯誤，如不正確匹配的括號，括號缺少，缺少的功能名稱，並使用其他的時候，你應該使用其他如果。 當你修復它們時，它看起來像你的點擊功能已經有一些你想要的功能。

接下來我會建議取消贊成jQuery的動畫的端部處理器，您可以通過連接到大多數動畫功能使用的setTimeout的。

最後，你應該重構一下你的代碼。我不認爲is('visible')做你認爲它做的事，但幸運的是有一個slideToggle方法可以很容易地做你想做的事。然後

你的點擊處理程序需要考慮的情況下，當菜單已經打開，當其未打開，然後採取相應的行動。爲此，您可以考慮使用toggleClass，然後在決定執行什麼動畫之前，先檢查它與hasClass中的哪一類。

//-----------ENQUIRY-FORM---------- 
 

 
$('#enquiry-shown').click(function() { 
 
    
 
    if(!$(this).hasClass('closed')){ // if the form is not closed 
 
    $(this).animate({ // animate the form to open state 
 
     width: "950px", 
 
     borderRadius: "0px", 
 
    }, 1000,()=>{ 
 
     $("#enquiry-form").slideToggle() 
 
    }); 
 
    }else{ // if the form is closed animate in reverse order 
 
    $("#enquiry-form").slideToggle(
 
    ()=>{ 
 
     $(this).animate({ 
 
      width : "210px", 
 
      borderRadius : "50px" 
 
     }, 1000); 
 
     } 
 
    ) 
 
    } 
 
    $(this).toggleClass('closed'); // toggle the class 
 

 
});

/*--------ENQUIRIES---------*/ 
 

 
#enquiry-container { 
 
    text-align: center; 
 
    margin-bottom: 25px; 
 
} 
 

 
#enquiry-shown { 
 
    background-color: white; 
 
    padding: 10px 0; 
 
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3); 
 
    width: 210px; 
 
    border: solid 1px #d8d8d8; 
 
    border-radius: 50px; 
 
    margin: 0 auto; 
 
} 
 

 
#enquiry-name { 
 
    font-family: "calibri light"; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    margin: 0; 
 
    display: inline; 
 
    padding: 0 0 0 10px; 
 
} 
 

 
#enq-arrowdown { 
 
    width: 25px; 
 
    height: 16px; 
 
    float: right; 
 
    padding: 10px 19px 0 0; 
 
    display: inline-block; 
 
} 
 

 
#enquiry-form { 
 
    width: 950px; 
 
    height: 400px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    display: none; 
 
    border-bottom: solid 1px #d8d8d8; 
 
    border-right: solid 1px #d8d8d8; 
 
    border-left: solid 1px #d8d8d8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="enquiry-container"> 
 
    <div id="enquiry-shown"> 
 
    <h2 id="enquiry-name">Enquiries</h2> 
 
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png"> 
 
    </div> 
 
    <div id="enquiry-form"> 
 
    <div> Hello I am a form </div> 
 
    </div> 
 
</div>