Response title
This is preview!
jQuery slideDown() not actually animating
in Using jQuery
•
7 years ago
I'm trying to use slideDown() when displaying dynamically created
elements. I find that the delay works, but there is no animation,
the div just pops up. I've set the width, I've read you
need to have a fixed width in order for jQuery to run the animation
smoothly, but that still has not helped. I had no issues when
using slideUp() when removing the element, only on creation with
slideDown(). Any help would be great.
- $(document).ready(function(){
- //Stop the form from submitting
- $('#submit-form').submit(function(e){
- e.preventDefault();
- });
- //Variables to store totals
- var itemCounter = 0;
- var priceCounter = 0;
- //Handler to get value of ITEM and PRICE
- $('#submit-btn').click(function(){
- //Create List title
- if(itemCounter = 1){
- $('#listTitle').html(
- '<h3 id="listTitle">Your List!</h3>')}
- //Get value for submitted item and append to list
- var addItem = $('#item').val();
- itemCounter ++;
- //Functionality to keep track of TOTAL PRICE and be able to remove an
- //item so the price reflects the removal
- var addPrice = Number.parseInt($('#cost').val());
- priceCounter += addPrice;
- //Append ITEM and PRICE to document
- var addToList =
- '<li class="addedItem">' +addItem+ '<button class="delete" data-price="'
- +addPrice+ '">Delete</button></li>';
-
-
- //---------HEREIN LIES THE PROBLEM-------------!!!!!!!!!!!!!!!!!!
- $('#items').slideDown('2000', function(){
- $('#items').append(addToList);
- })
- //Clear the form after submit
- $('#item').val('');
- $('#cost').val('');
- //Clear ESTIMATED COST TOTAL and append new total
- $('#estimatedCost').html('');
- $('#estimatedCost').append('$' +priceCounter);
- });
- //Functionality for Delete Button
- $(document).on('click', '.delete', function(){ //Because the delete button has been created //dynamically you must specify
- var price = +$(this).data('price'); //to listen to the DOCUMENT for the click on //'DELETE'
- var fade = $(this).closest('li');
- fade.slideUp('slow', function(){
- fade.remove();
- });
- //Edit item total and estimated cost after removing an item
- itemCounter --;
- $('#itemsTotal').html('');
- $('#itemsTotal').append(itemCounter);
- priceCounter -= price;
- $('#estimatedCost').html('');
- $('#estimatedCost').append(priceCounter);
- });
- //Function to create sum all off prices
- function sumPrice(){}
- });
-
1