我努力让这个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>