Using jQuery to animate two images simultaneously in opposite directions

Trying to make two images animate using a single function. The issue is that one image needs to animate the left attribute while the other needs to animate the right. Here's what I have so far:


        $(document).ready(function(){
            var cat = $('.cat'),
                man = $('.man-sitting');

            moveImages(cat, "left");
            moveImages(man, "right");
        });
    
        function moveImages($image, $direction){
            $image.delay(500)
                .css({
                    visibility: "visible",
                    display: "none"
                }).animate({
                    opacity: "show",
                    $direction: "0px"
                }, 1750);
        }
    

The delay and fading are working fine, but the direction is not behaving as expected. Thanks in advance!

Answer №1

Using $direction in the way you are attempting might not work as expected. Here is a possible solution:

function fadeImages($image, $direction){

    var styles = new Object();
    styles['opacity'] = "show";
    styles[$direction] = "0px";

    $image.delay(500)
        .css({
            visibility: "visible",
            display: "none"
        }).animate(styles, 1750);
}

Answer №2

Give this a shot:

let animationConfig = { opacity: "show" };
animationConfig[$direction] = "0px;"

.animate(animationConfig, , 1750);

Your current solution is ineffective because it treats $direction as a key rather than replacing it with the actual value of your variable.

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

jQuery animation not executing as expected due to transition issues

I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...

The Catcomplete widget malfunctioned after the update of jQuery UI from version 1.8 to 1.12

I've encountered an issue with my code after updating to jQuery UI 1.12 var currentCategory = ""; $.widget("custom.catcomplete", $.ui.autocomplete, { _renderMenu: function (ul, items) { var self = this; $.each( ...

Using Ajax to invoke a C# webmethod

I'm trying to call a webmethod defined in this specific class <%@ WebService Language="C#" Class="emt7anReyady.myService" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Linq; usi ...

Guide to manipulating DOM elements with Angular.js: inserting or deleting elements using createElement

Within my Angular directive, I am dynamically generating an external script from the DOM for a specific object within a list. This script includes both a 'script' tag and div content. While I am able to successfully add the script, I am encounter ...

Using DataTable with backend processing

Has anyone successfully implemented pagination in DataTable to dynamically generate the lengthMenu (Showing 1 to 10 of 57 entries) and only load data when the next page is clicked? I'm currently facing this challenge and would appreciate some guidance ...

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

My code structure is set up like this: <div id="main-parent"> <div class="child2"> <div> child2 </div> </div> <div>child3</div> - - - - <div class="ch ...

Revamping Existing Styles: Making a Statement with `:after`

In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...

I'm having trouble rendering the div using PHP code within an AJAX request in CodeIgniter

I am a beginner in AJAX and I'm attempting to display specific restaurant data based on the selected area from a dropdown using AJAX. However, I am facing issues with displaying the restaurant view correctly. Can someone please guide me on how to proc ...

Capable of generating an ajax URL parameter conditionally for utilization with jQuery Validate

I am having an issue with my jQuery validation script. What I am trying to achieve is this: when a user clicks the send button, the script will determine whether to execute an if or else statement based on the last portion of a string (isAdd). Subsequently ...

Retrieve the value of a JSON array containing only a single object using jQuery

In my project, I have a jQuery file and a PHP file. If the PHP file successfully completes the process, it returns the value 2 using `echo json_encode(2)`. I am able to catch this value in the jQuery file and display a string on an HTML div without any iss ...

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

"Is there a way to alter the background color of the second span within a Bootstrap row

I currently have 4 WordPress services in a loop, and I am trying to change the background color of the second service. However, when I try to apply the CSS background property, it ends up affecting all of the services. Here is my template code: <div ...

Sending an Ajax request with JSON data to a PHP script to receive multiple values in

After following numerous tutorials and questions on the website, I attempted to retrieve an array from an ajax call to a PHP function using 'echo json_encode()' The root of my issue seems to be in the JS code JavaScript Code.... var pid = 23; ...

Reorder elements in CSS Grid

I've been working with a css-grid and it's almost there, but I'm stuck on reordering the items in a specific way. Currently, the html layout is set as “1, 2, 3, 4,…10”, but for smaller screens, I want the visual order to be “1, 2, 4 ...

Unable to establish successful Ajax connection with PHP function

I'm encountering an issue with submitting a form through ajax and I can't seem to figure it out: Ajax - samepage <script type="text/javascript"> $(document).on('submit','.subscribe',function(e) { $.ajax({ url: &apo ...

My div remains stationary despite keyframes

I've been attempting to create a div that moves up and down using CSS3, but unfortunately it's not working properly. <div class="globo"></div> @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } @-moz-keyframe ...

Issue with CSS wrapper background not displaying

I am currently working with a layout that looks like this: <div class="contentWrapper"> <div class="left_side"></div> <div class="right_side"></div> </div> The contentWrapper class is styled as follows: .contentWrappe ...

What measures can be taken to avoid the entire page from reloading?

Within my page, there exist two containers. The first container is designated for displaying a list of items, while the second container showcases actions corresponding to each item. A feature allows me to add a new item dynamically to the first container ...

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...

Guide to emphasizing text with hover effects and excluding whitespace (javascript)

Currently, I am utilizing jQuery for hover highlighting purposes. However, I am facing an issue where the entire div gets highlighted instead of just the text. I attempted to use an "a tag" but don't want a reference link. I know this should be a simp ...