access older siblings, accordion animation

I need assistance achieving an accordion effect on a DIV when hovering over it.

The right side of the accordion is functioning properly, but I am facing issues with the left side.

You can view my code on jsFiddle

Could someone please provide guidance on how to fix the left side? I have been attempting this for hours without success :(

Javascript:

$(document).ready(function () {
    $('.middle').hover(function () {
        $(this).siblings().stop().animate({
            opacity: 1
        }, 200);
    },

    function () {
        $(this).siblings().stop().animate({
            opacity: 0
        }, 200);
    });
});
javascripthtmlcss

Answer №1

The fading of the right side while the left remains strong can be attributed to the application of a CSS transition specifically to the right side spans.

To resolve this issue, simply apply the same transition to all <span> tags:

.squares span {
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0.1s;
}

You could streamline and enhance your code by consolidating repeated styles within the multiple spans into cohesive definitions.

For instance:

.squares span {
    opacity: 0;
    float: left;
    width: 139px;
    height: 138px;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0.7s;
}

span.middle {
    background: #0f0;
    opacity: 1;
}

span.left1,
span.right1 {
    background: #00F;
    transition-delay: 0.1s;
}
span.left2,
span.right2 {
    background: #0FF;
    transition-delay: 0.3s;
}
span.left3,
span.right3 {
    background: #0F0;
    transition-delay: 0.5s;
}
span.left4,
span.right4 {
    background: #FF0;
    transition-delay: 0.7s;
}

Check out the functional demonstration here: http://jsfiddle.net/uBBZ2/14/

Answer №2

Your CSS currently specifies the transition properties and durations for the right side blocks only, leaving the left side untouched. By disabling these settings, both transitions occur rapidly at once. However, when you apply the same settings to the left side, the animations slow down significantly for both sides.

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

Maintain parent hover effect while child is being hovered over

After exploring various solutions to fix an issue, I've hit a roadblock. Adding CSS and jQuery code seemed promising at first, but upon refreshing the browser, a new problem emerged. The parent element retained its hover state background color, but th ...

jqueryhtmlcsshoverparent-child

Data is not appearing when using Node.js with mongoose and the populate() method

I am facing an issue while trying to display data from a database. Even though I have integrated 3 different schemas into one, the combined data is not being displayed as expected. I have attached all three schemas for reference. While async-await along w ...

javascriptnode.jsexpressmongoose

Show user information from a MySQL database in a dynamically generated table using PHP

I am working on developing an absence tracking system using PHP and MySQL. Each absence is categorized by a specific leave type, such as sick or emergency. The goal is to present this information in an HTML table format where the names of users are display ...

phphtmlmysql

The issue at hand involves Javascript, Ajax, latte, and Presenter where there seems to be a restriction on using GET requests for a file located

I have a query. I’ve been given the task of adding a new function to our web application. It was built on PHP by someone else, so it's proving quite challenging for me to debug as I am not familiar with this technology. I’m attempting to incorpor ...

javascriptajaxpresenternettelatte

Angular JS Tutorial: How to Nest ng-views

When merging two separate Angular apps into one, I encountered the need to nest ng-views. The structure of my sample code (index.html) looks like this: <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta ch ...

javascriptangularjs

The process of flattening an array in Zustand: a comprehensive guide

In my array of brands, each brand object includes a brand name and products. Initially, I successfully added a new brand object to the brands list. However, when attempting to add another brand while keeping the previous brand data intact, it does not fu ...

javascriptreactjsarraysreact-nativezustand

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...

javascripthtmlcssvue.jsvuejs2

Tips for improving the readability of HTML within a JavaScript file

This is the HTML I have been given <div data-role="collapsible"> <div class="prd-items-detials"> <ul> <li class="head"> <form> <label class="testtt" for="checkbo ...

html

I'm facing a frustrating issue where using NodeJS with the Passport local strategy is resulting

I am experiencing a severe headache when attempting to log in using Passport. When I make a post request to /login with an email and password, Passport successfully authenticates it without any errors. However, the return res.redirect('/user') fu ...

javascriptnode.jsexpresspassport.js

Exploring the World with AngularJS and Google Maps API through ngGeolocation

Having some difficulty displaying my geolocation on Google Maps API using a marker. I am utilizing the ng controller ngGeolocation and the http://angular-ui.github.io/angular-google-maps/ Previously, I hardcoded the marker and map location without any is ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3geolocation

Establishing the Time-to-Live (TTL) with Redis-OM and Node Object Mapping

Recently, I stumbled upon the exciting new Redis-OM Node Object Mapping feature. Although I have limited experience with Redis, I am eager to dive into it now. Currently, I have a basic function in place for creating rooms but I want these rooms to automa ...

javascriptnode.jsredisormttl

Raspberry Pi Fast Server: Issue with AJAX not locating images in directory and malfunctioning ID search

I'm completely new to Raspberry Pi, linux, and server concepts, so I'd appreciate explanations at a beginner level. My goal is to create a display similar to those you see in lobbies showing corporate slides and weather updates. While setting up ...

javascriptpythonajaxdateraspberry-pi

Double-clicking with Ajax and JSF after the initial click

When I interact with a dataTable that has a column named DELETE (which is a link) and has a listener attached to it, I experience an issue. After clicking on the link for the first time (click 1), the row gets deleted as expected. However, subsequent click ...

javascriptajaxjakarta-eejsf-2

Finding elements using XPath in Selenium

When using Firebug to inspect an input field I need to fill in, I found this code: <label for="form:composite:tabView:ssn">Fødselsnummer</label> In my selenium script, I tried the following: WebElement element = driver.findElement(By.xpath ...

c#htmlseleniumxpath

Testing Your Angular 7 Code: Unit Testing Made Easy

I am currently working on developing unit tests for this angular script: export class DataService { private csrfToken: string = ''; private isContentShown: BehaviorSubject<boolean> = new BehaviorSubject(true); constructor(private h ...

javascriptangularunit-testingangular7

There was a failure to retrieve any data when trying to send an ajax request to

When attempting to send JSON data to my PHP, I am not receiving any response when accessing it in my PHP code. Below is the Ajax request being made: var project = {project:"A"}; var dataPost = JSON.stringify(project); $.ajax({ url: 'fetchDate.p ...

javascriptphpjsonajax

Can the route.meta property be accessed from outside the component?

I've encountered an issue with using the route.meta property in my Vue 3 project. Initially, I had it working inside a Vue component, but when I moved the code into a .ts file, it stopped functioning and an error appeared in the browser. Here is my . ...

javascriptvue.jsvue-componentvue-router

Loads a PHP file automatically using the URL from a jQuery Ajax method

Using the jquery ajax method, I am trying to populate a dropdown menu with a set of option values from my title.php file. However, upon loading the page, in the Chrome Android browser, it redirects to the title.php. Does anyone have any insights into what ...

phpjqueryajaxhtmlforms

Using aliases in npm packages is not supported

I am working on creating an npm package that I want to use in another application. During development, I set a path in tsconfig for importing various modules instead of using a relative path. However, when I download my package into the test app, it is una ...

javascripttypescriptnpmwebpack

What could be the reason for encountering TypeScript within the Vue.js source code?

While exploring the vue.js source code, I stumbled upon some unfamiliar syntax that turned out to be TypeScript after further investigation. What baffled me was finding this TypeScript syntax within a ".js" file, when my understanding is that TypeScript ...

javascripttypescriptvue.js