纯javascript下拉DIV动画

Question

我很想搜索谷歌，所以我决定在这里问专业人士。是否有可能以及如何创建下拉DIV的效果，如http://137pillarshouse.com/accommodation - 使用纯javascript而不使用jQuery或任何库的BOOK NOW块。

感谢

Answer 1

他们没有混淆javascript代码，你可以从他们的代码中学习。

1。 http://137pillarshouse.com/js/script.js

// show/hide booking form
        $('#bookingpanel #booknow').click(function(){
            $('#quickbookingform').slideToggle(750,'easeOutQuart');
            $('#bookingpanel').toggleClass('open');
            $(this).html($(this).html() == 'Book <em>Now</em>' ? 'Close' : 'Book <em>Now</em>');
            return false;
        });
// Quick Booking Form
    $('#StartDateString').datepicker({dateFormat:'dd/mm/yy',firstDay:1,minDate:1,maxDate:'+18m'});

2

    <div id="bookingpanel" class="">
 <form action="https://www.luxuryroomreservations.com/en-GB/IBE/115/Landing/Index" method="post" id="quickbookingform" class="booking" style="display: none; ">
    <fieldset>
    <label for="StartDateString">Arrival Date</label>
    <input class="text hasDatepicker" id="StartDateString" name="CurrentBooking.CurrentUserSearch.StartDateString" type="text" value="">
     <label for="NoOfNights">Nights</label>
     <select id="CurrentBooking_CurrentUserSearch_NoOfNights" name="CurrentBooking.CurrentUserSearch.NoOfNights">
        <option selected="selected" value="1">1</option>
        .....
    </select>
    <div class="left">
    <label for="NoOfAdults">Adults</label>
    <select id="NoOfAdults" name="CurrentBooking.CurrentUserSearch.NoOfAdults">
        <option value="1">1</option>
        <option selected="selected" value="2">2</option>
        <option value="3">3</option>
    </select>
    </div><!-- /.left -->
    <div class="right">
    <label for="NoOfChildren">Children</label>
    <select id="NoOfChildren" name="CurrentBooking.CurrentUserSearch.NoOfChildren">
            <option selected="selected" value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div><!-- /.right -->
    <input id="CurrentBooking_CurrentUserSearch_AccountId" name="CurrentBooking.CurrentUserSearch.AccountId" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_SpecialRateCode" name="CurrentBooking.CurrentUserSearch.SpecialRateCode" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_IataCode" name="CurrentBooking.CurrentUserSearch.IataCode" type="hidden" value="">
    <input id="CurrentBooking_CurrentUserSearch_HotelCode" name="CurrentBooking.CurrentUserSearch.HotelCode" type="hidden" value="HUCNXPH">
    <p><input type="submit" value="Check Availability" id="booking_submit"></p>
</fieldset>
</form><a href="#bookingpanel" id="booknow">Book <em>Now</em></a>
</div>

3。还有一点CSS

移动

@media only screen and (min-width: 768px)
#bookingpanel {
top: -10px;
right: 60px;
}

桌面

#bookingpanel {
position: absolute;
top: -10px;
right: 20px;
z-index: 100;
width: 15em;
-moz-transition-duration: .25s;
-webkit-transition-duration: .25s;
-o-transition-duration: .25s;
-ms-transition-duration: .25s;
transition-duration: .25s;
}

剩下的由你决定...有点风格，你会到达那里我敢肯定：）