Sliding in images with JQuery

I need help with animating the slide-in effect of 7 "card" images from the left to the center of the screen. I attempted to achieve this using the following code:

function FetchCards() {
    $("#pack").css('margin-left', 0);
    $("#pack").css('margin-right', 0);
    $("#pack").animate({
        left: '-1000px'
    }, 'slow');
};
setTimeout(FetchCards, 7000);

However, it seems like my code is not working as expected. I am confused about where exactly I should declare the function "FetchCards". You can find my current code at:

http://plnkr.co/edit/L4wgzTDcV86tZK1eE23D?p=info

I would appreciate guidance on how to properly declare the "FetchCards" function and if my code will effectively hide the images until they slide in.

javascriptjqueryhtmlcssimage

Answer №1

Here's a solution for you: 

function SlideCards() {
  $("#deck").css('margin-left', 0);
  $("#deck").css('margin-right', 0);
  $("#deck").animate({
    'margin-left': '-1000px'
  }, 'slow');
 }
setTimeout(function(){SlideCards();}, 7000);

Answer №2

Check out this example and let me know if it meets your requirements... EXAMPLE HERE: http://jsfiddle.net/CAqE4/

JavaScript:

function FetchCards() {
    $("#pack").css({
        'margin-left': 0,
        'margin-right': 0
    }).animate({
        left: '-=1000px' // -= subtracts the number of pixel
    },function(){
        //this function will be called after #pack animate
        $(/*IMAGE SELECTOR*/).fadeIn(); //insert the image selector
    });
};
setTimeout(FetchCards, 7000);

CSS: Your image should have display:none in the CSS.

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

Why would someone opt to utilize process.env.PORT in their code?

Setting the environment variable PORT to a specific value, such as set PORT=5000, provides explicit instructions on which port the program should use. How does this method differ from simply instructing it to use port 3000? ...

javascriptnode.jsexpresswebserverport

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

jquerycssjquery-animateheight

New parents, same name D3.JS

Currently utilizing d3.js to visualize a tree structure. When parsing the JSON object containing nameOfNode and NameOfParent, encountering an issue when there are two nodes with the same name. Seeking recommendations on the most effective way to address ...

javascriptjsond3.jstreenvd3.js

What's the best way to retrieve the id or index of a card within a list?

Struggling to fetch the id's of documents retrieved from a MongoDB database and displayed on React and Material-Ui cards. Tried logging id in functions and APIs, but receiving 'undefined' or metadata from the delete function. Delete functi ...

javascriptreactjsmongodbmaterial-ui

Convert JSON response date format to a format specified by the user

The following code snippet is currently returning the dates for $("#dob") and $("#anniversery") as 2014-04-01T00:00:00 This is my current code: <script> $(function() { function log(message) { $("<div>").text(message).p ...

javascriptjqueryjson

Capture the contents of a table cell and store it in the clipboard

Is there a way to create a hover copy button in a table cell without actually placing the button inside the <td> tags? The goal is to allow users to easily copy text from a specific column cell by hovering over it. function myFunction() { var c ...

javascripthtmljquerycsstwitter-bootstrap

Customizing Marker Clusters with ui-leaflet: A guide on changing marker cluster colors

I'm trying to customize the markerCluster color in a non-default way. I've been exploring the API and it looks like the recommendation is to modify a divIcon after creation, possibly like this: var markers = L.markerClusterGroup({ iconCreateFunc ...

javascriptangularjsleafletleaflet.markerclusterui-leaflet

sinon: Techniques for stubbing an entire class as opposed to singular methods

I am faced with a situation where I have a class that instantiates another class in my test. My goal is to stub out the entire second class, ensuring that its constructor is never invoked. Consider the following scenario: Test.js class Test { construct ...

javascriptnode.jsunit-testingsinon

Refresh the datatable automatically when a field is updated without the need for AJAX requests

I need assistance with sorting a datatable column that contains checkboxes. The issue I'm facing is that the sorting is not working due to me changing the value of the column. Since it's not generated via ajax and I can't use the reload() me ...

jquerydatatabledatatables

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Being new to programming, I recently completed a basic Tic Tac Toe gameboard successfully. However, as I progress to the next phase of my assignment which involves implementing an AI opponent, I encountered several challenges. As a novice in programming, ...

javascripthtmlcss

Handlebars: Access to the property "some prop" has been denied as it is not considered an "independent property" of its parent object

Model of MongoDB: const mongoose = require('mongoose'); const ProductSchema = mongoose.Schema({ _id:mongoose.Schema.Types.ObjectId, Pid:Number, Pname:String, Price: Number, Pdesc: String, Picname: String }); module.ex ...

htmlnode.jsmongodbmongoosehandlebars.js

The PHP file on my local WAMP server seems to be having trouble retrieving inputs from the HTML's GET or POST methods

<!DOCTYPE HTML> <html> <body> <form action="testrun.php" method="GET"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> </bo ...

phphtmlformswamp

What could be causing my Bootstrap navbar menu item to move to the line beneath it when there is centered text?

I've implemented a basic Bootstrap navbar from the example provided on the Bootstrap website at . However, when I tried to add custom text to the center of the navbar, it caused the "Contact Us" menu item to break onto two lines instead of staying on ...

htmlnavbarbootstrap-5

Combine two redux actions and access the modified state in the second action

I'm facing a dilemma with a straightforward problem that I believe I have a solution for, but I'm uncertain about the effectiveness of my idea. Essentially, in the current state of things, I have an array property that requires updating just bef ...

javascriptreactjsreduxreact-redux

Displaying search results in various Angular components

On my home page (homePageComponent), I have a search feature. When the user clicks on the search button, they are redirected to a different page called the search list page (searchListComponent). Within the searchListComponent, there is another component c ...

javascriptangulartypescriptangular-ui-routerangular-directive

Utilizing Node.js to Retrieve a POST Request JSON and Modify its Format

Received an incoming Post request in JSON format like this: [{"username":"ali","hair_color":"brown","height":1.2},{"username":"marc","hair_color":"blue","height":1.4},{"username":"zehua","hair_color":"black","height":1.8}] Need to transform it into the f ...

javascriptnode.js

Updating inner text content dynamically can be accomplished without relying on the use of the eval() function

I am faced with a situation where I have multiple batches of code structured like this: 1 <div id="backgrounds" class="centery">Backgrounds 2 <div id="bk1" class="attr">Background 1 3 <div class="container"> 4 ...

javascripthtml

How can we best optimize the conclusion of an infinite scroll when content is depleted?

Our web application has a feature that automatically loads more content when the bottom of the page is reached. Here's how it works: $window .on('scroll', function () { var $this = $(this) ; if ($this.scrollTop() == $do ...

javascriptjqueryinfinite-scroll

Extract data from an ajax request in an AngularJS directive and send it to the controller

I am currently experimenting with integrating the jQuery fancy tree plugin with Angular. The source data for the tree is fetched through an ajax call within my controller. I am facing a challenge in passing this data to my directive in order to load the tr ...

javascriptjqueryajaxangularjs

Leveraging a JavaScript variable within a PHP snippet

Similar Question: Sending a PHP string to a JavaScript variable with escaped newlines Retrieving a JavaScript variable from PHP I am trying to work with a Javascript function that accepts one variable, having some PHP code embedded within it. I am ...

phpjavascriptvariables