Delay the fading in of an element using jQuery

Is there a way to remove the pause between the images in my JavaScript/jQuery slideshow when fading in and out? I attempted using a small delay, but it still didn't eliminate the blank space. Any suggestions?

Check out the code on jsfiddle: https://jsfiddle.net/jzhang172/s624zn7d/1/

var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
                   "http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
                   "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];

function preloadImg(pictureUrls, callback) {
  var i, j, loaded = 0;
  var imagesArray = [];

  for (i = 0, j = pictureUrls.length; i < j; i++) {
    imagesArray.push(new Image());
  }
  for (i = 0, j = pictureUrls.length; i < j; i++) {
    (function (img, src) {
      img.onload = function () {
        if (++loaded == pictureUrls.length && callback) {
          callback(imagesArray);
        }
      };
      img.src = src;
    }(imagesArray[i], pictureUrls[i]));
  }
};


function roll(imagesArray, currentPos){

  var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
  slide.fadeIn(2000, function() {
    slide.fadeOut(1500, function() {
      currentPos++;
      if(currentPos >= imagesArray.length){
        currentPos = 0;
      }
      roll(imagesArray, currentPos);
    });
  });
}

$(function () {
  preloadImg(imagesArray, function (imagesArray) {
    roll(imagesArray, 0, 3);
  });
});
.featured-wrapper {
  height: 500px;
  width: 100%;
  overflow: hidden;
}

.things {
  font-size: 50px;
  height: 500px;
  width: 100%;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">

</div>
<div class="things">I'm the stuff underneath</div>

Answer №1

To achieve the desired effect, consider incorporating an opacity animation with a tailored easing function. Take advantage of the various options provided by jQuery UI easings

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

Prevent the event from spreading down to the child elements

I believed I had a solid understanding of the concept of event bubbling, but now I am starting to doubt my grasp on it. I designed a semi-modal dialog like so: <div class="context-menu"> <div class="menu"> … </div> < ...

Inserting multiple values into my PDO database

I am facing an issue with my code that I need help with. I am trying to include more data than just my :SteamID in my database. This function/PDO is currently executing every time someone visits my site. Working code: /*Check possible existing data*/ $odb ...

Creating a circular shape with a radius that can be adjusted

I'm trying to create an expanding bubble-like circle of various colors when clicked on a blank page. The circle should continue increasing in size each time it is clicked, only stopping when the mouse click is released. I am looking to use HTML, CSS, ...

The success callback is not triggered when making a JSONP request

I have a specific URL that returns JSON data when accessed through a browser or REST client. However, I am having trouble making the request using jQuery in my express server running over HTTPS. Despite receiving a successful response in the network debug ...

Switch between display modes using a button and CSS media query

I'm trying to find the most effective method for toggling display states on a webpage using a button while also being able to adjust based on screen size. For larger screens, I want to default to a horizontal layout with the option to switch to vertic ...

Getting an error response with a status of 200 when making a jQuery ajax call

After sending a jQuery ajax request to my express-powered node.js server, everything seemed to be in order. However, to my surprise, the response invoked the error callback instead of the success callback, despite receiving a status code of "200". It was d ...

The image referenced in the assets folder could not be located within the SCSS

Although I've come across similar questions, none of the solutions provided seem to work for me. I've tried them all, but they just don't seem to do the trick. My goal is quite simple - I just want to set a background image using CSS. Howev ...

Tips for positioning the title of a card in Bootstrap-Vue

I'm currently working with the <b-card> component from bootstrap-vue and encountering an issue where I am unable to center align the title property. Does anyone have a solution for this problem? Below you can find the structure of my card, which ...

The absence of a React JS button on the page

I'm in the process of creating a React demo application and I've come across this component: var MediaList = React.createClass({ displayName: 'MediaList', getInitialState: function() { return { tweets: getTweets(numTweets) ...

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Struggling to add a hover effect to the rows in an Angular UI grid. The goal is for the entire row to change background color when hovered over, but with an expandable grid that includes a row header, applying CSS rules only affects either the row header o ...

I have a collection of dictionaries that I need to integrate into a Django application. What is the best approach for doing this?

My data structure consists of an array of dictionaries: [{'name': 'X','class':'A'},{'name':'Y','class':'B'}] I need the HTML to display as follows: Name:X, Class:A Name:Y, C ...

Cross-domain PHP AJAX using jQuery

While working on my web application, I encountered a challenge with an iframe from a different domain. Despite writing jQuery scripts in the iframe to pass data to the parent window, JavaScript restrictions prevent direct communication between domains. To ...

In JavaScript, not all elements are removed in a single iteration, even if the condition is consistently met

I'm currently attempting to compare two arrays containing multiple objects and remove elements based on a condition. To my surprise, while testing in Chrome's console, I noticed that the first array (arr1) is not being emptied even though I am us ...

Show a pop-up notification when the mouse passes over a word in the text

I've been grappling with this issue for days now and could really use some guidance. Despite scouring the web, I'm unsure if I've approached it correctly. What I'm trying to achieve is having an alert box pop up each time a user hovers ...

Using Vue.js to add animation effects to elements

What is the best way to use the .animate function on an element in vuejs? <aside v-transition v-if="toggleMenu"> <a href="#">Haha</a> <a href="#">Nice</a> <a href="#">Menu</a> </aside> A similar piece ...

Utilizing AngularJS to Extract JSON Data from Gzipped Files Stored Locally via Ajax

Currently, I am attempting to retrieve and read a JSON file that is stored in data.gz using AngularJS's $http service. However, when I make the request, all I get back are strange symbols and characters as the response. My application is being run loc ...

A Guide to Parsing JSON Data in JavaScript

I am facing an issue with the JSON received from an AJAX call. The problem lies in the unexpected '\t' after a bullet point, causing a JavaScript error in the JSON.Parse(data.d) function. Can you provide advice on how to address this situati ...

Browser now replacing attribute translate="yes" with translate="translate"

We have encountered an issue with a translation library that is affecting the functionality of our page. <html lang="en" class="notranslate translated-ltr"> <meta name="google" content="notranslate"> As ...

Environment variables in Node process are uninitialized

I'm currently in the process of developing my first Express application, which requires interaction with an API using a secure API key. To ensure the security of this key and any future environment variables, I have decided to store them in a .env fil ...

What is the process for showcasing specific Firestore items on a webpage?

database I've encountered an intriguing bug in my code that is proving difficult to resolve. The code involves a straightforward setup with React and Firestore, where items are listed on one page and their details are displayed on the next. However, t ...