leveraging jquery for delaying, subsequently fading out, and ultimately removing

I am currently working on a website that has a dialog feature which I am trying to make functional by following these steps:

The dialog is created using .append() method, then it is set to wait for 5 seconds before fading out and being removed. Despite my efforts, the code I have written does not seem to be working as intended.

HTML

<div class="addAddressDialog"></div>
<div class="overlay"></div>

JavaScript

$(".addAddressDialog").append("<span> Thank you </span>")
     .delay(5000)
     .queue(function(next){
      $('.addAddressDialog, .overlay').fadeOut('fast',function(){$(this).remove()});                                
    });

http://jsfiddle.net/mynameisdonald/pAzyc/

jquerycssfadeout

Answer №1

Check out the updated code in this fiddle - http://jsfiddle.net/qwerty/9/

Avoid using remove inside the callback function

    $('.popup').css("width",$(window).width());

    $(".showModal").append("<span> Thanks for visiting! </span>").delay(3000).queue(function(next){
      $('.showModal, .popup').fadeOut('fast').empty(); 
});

Answer №2

I made some adjustments to your fiddle - check it out here: http://jsfiddle.net/shershen08/pAzyc/6/. It's now functioning properly. The issue was that $(this) was targeting only one element, but if you want to apply the function to multiple elements, you can use $.each

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on Updating Array Value with jQuery

I have been working on using jQuery to edit array values. Here is my approach: From a modal, each time I click the "Add item" button, it pushes values to an array and appends the data to a table. var iteminfo = { "row": 'row' + cnt, "ma ...

htmljqueryhtml-table

What is the best way to include my preferred links for reading with PHP Universal FeedParser?

Recently, I've been experimenting with the PHP Universal FeedParser to retrieve and display RSS feeds on my website. However, as a newcomer to this technology, I have encountered some challenges. While the initial link provided in the sample works wit ...

phphtmlcssxmlrss

Unable to delete borders within the container

Is there a way to eliminate the borders within this container? Visit this link for reference. I've tried using firebug but I can't seem to locate it... Appreciate any assistance you can provide. Thank you! ...

csswordpressborder

Looping through a JSON array and encoding it using the `

I am looking to retrieve data from the database using AJAX and populate a 'select' tag with that data. Each name should be displayed in its own 'option'. Here is the code snippet: Index.php: <label>Select:</label> <sel ...

javascriptphpjqueryajaxdatabase

Arranging Content with Bootstrap Columns

I am trying to organize my content into three sections as follows: A - main content of page B - very important content (must be visible without scrolling) C - less important content. The current layout I have is like this: ----- |A|B| |A|C| ----- Howe ...

htmlcsstwitter-bootstrap

Optimal placement and size for the slick slider

I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...

javascriptjqueryhtmlcss

Value comparison displayed in text boxes

Having two textboxes and a script to compare their values can sometimes result in unexpected behavior. For instance, when the value in Textbox2 comes from the database and it happens to be 0, it can cause issues. One possible solution is to allow Textbox1 ...

javascriptjquery

The height of the href is not displaying correctly when the text-decoration is disabled and it is placed next to

In my design, I have a link positioned next to an image with perfect vertical alignment. Everything looks great when the text has the standard text-decoration, centered vertically and all that. However, as soon as I remove the text-decoration, leaving the ...

csshrefvertical-alignment

Efficiently loading images with dominant color placeholders using lazy loading

Does anyone have tips on achieving the same effect as niice.co with lazy loading images? If you scroll through their website, you'll notice that before the image loads lazily, the background of the div where the image is placed matches the dominant c ...

javascriptjquery

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...

javascriptjquerycssborderaddition

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

javascriptjqueryhtmlemail

Quick trick to strip decimal points from prices with jquery

Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...

jqueryhtmlrounding

Deactivate the active class in a closed tab in Bootstrap 4

Eric G has provided me with a tab pane that can be toggled open and closed by clicking on a tab. However, now that the tab pane toggles open (using JavaScript to remove the active class), I also need to remove the active class from the tab itself. The .act ...

jquerytabsbootstrap-4bootstrap-tabs

Switch image upon hover within a sprite

I have a sprite that I utilize for displaying various images. Currently, my aim is to change the sprite image upon hovering using solely CSS. .sprE { background-color: transparent; background-image: url(/i/fW.png); background-repeat: no-repeat; height: 30 ...

jquerycss

Understanding the Contrast between Relative Paths and Absolute Paths in JavaScript

Seeking clarification on a key topic, Based on my understanding, two distinct paths exist: relative and absolute. Stricly relative: <img src="kitten.png"/> Fully absolute: <img src="http://www.foo.com/images/kitten.png"> What sets apart R ...

javascripthtmlcss

Prevent the Bootstrap table from expanding to the entire screen width and causing unnecessary spacing within the cells

I am facing an issue with a table that expands to fill the screen when it exceeds 600px, causing extra spacing on the right of each cell. How can I prevent this automatic growth and eliminate the unwanted space so that the next column aligns with the end o ...

htmlcssbootstrap-4

What are some effective solutions for resolving design problems in Isotope?

When I append the ajax coding, the data is coming fine. However, when I append this style="position: absolute; left: 468px; top: 0px;" css to the new appended data, it is not working. How can I achieve this? Below is my ajax code. Please provide suggestion ...

javascriptphpjqueryajaxappend

Is it possible to replicate jQuery's method of creating custom events in vanilla JavaScript?

Hey there! I'm interested in creating events in JavaScript similar to how jQuery does it. Does anyone have insight on how jQuery accomplishes this? I've noticed that using vanilla JavaScript like this: var myEvent = new CustomEvent("userLogin", ...

javascriptjqueryandroid-browsercustom-events

Creating a Bootstrap 4 table that utilizes the full width while maintaining responsiveness

Is it feasible to implement a table-responsive solution that adjusts column width based on the length of data within each column, while still allowing the thead to occupy the entire canvas width? For Example: (the last column with no content should take u ...

csshtml-tablebootstrap-4

Gathering information from a PHP form without redirecting to a new page

Can an array be passed from JavaScript to PHP on the same page before submission? In my index.php, I have a form where changing the value of an input triggers a function to send the input value to PHP. In PHP, this value is used to make an HTTP request to ...

javascriptphpjqueryajaxforms