Check out my code snippet here: http://jsfiddle.net/ZspZT/
The issue I'm facing is that the fourth div block in my example is flickering quite noticeably, especially when hovering over it. The problem also occurs occasionally with the other divs.
Appreciate any help or advice you can provide. Thanks in advance!
It seems like the easing function in .animate is causing an issue where your percentage widths add up to more than 100%, making the last sub-DIV disappear. There are a couple of solutions for this problem.
By replacing your percentage widths with fixed numeric widths, I was able to make the issue go away. Here's the simplified code:
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: 425
}, speed).siblings().stop().animate({
width: 25
}, speed);
}, function() {
$(this).siblings().andSelf().stop().animate({
width: 125
}, speed);
});
});
http://jsfiddle.net/mblase75/ZspZT/10/
Alternatively, you can use percent widths that add up to 99% instead of 100% and set a background color on the container DIV to hide the gap. Adding linear easing to the .animate method can prevent the total width from exceeding 100%:
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: '75%'
}, speed, 'linear').siblings().stop().animate({
width: '8%'
}, speed, 'linear');
}, function() {
$(this).siblings().andSelf().stop().animate({
width: '24.5%'
}, speed, 'linear');
});
});
#four-ways-slide-4,#four-ways-slider{background:#999999;}
Consider using 'mouseenter' and 'mouseleave' instead of 'hover'. It is also recommended to assign variables rather than repeating the same div selectors.
var firstSlide = $('#four-ways-slide-1');
var secondSlide = $('#four-ways-slide-2');
var thirdSlide = $('#four-ways-slide-3');
var fourthSlide = $('#four-ways-slide-4');
var allSlides = $('.four-ways-slide');
expandSlide = function(){
allSlides.animate({width:'8%'},{duration: 450, queue:false});
};
collapseSlide = function(){
allSlides.animate({width:'25%'},{duration: 450, queue:false});
};
firstSlide.mouseenter(function(){
expandSlide();
$(this).animate({width:'76%'},{duration: 450, queue:false});
firstSlide.mouseleave(function(){
collapseSlide();
$(this).animate({width:'25%'},{duration: 450, queue:false});
});
});
I've been trying to automate the process of selecting my shoe size, adding it to the cart, and checking out whenever I visit a sneaker page like FootLocker or FootAction. However, each time I attempt to run the script, I encounter the following error: ...
When running the code snippet below, I encounter an issue where I am not receiving status 200 and responseText. However, when using the following URL: http://api.microsofttranslator.com/V2/Http.svc/GetLanguagesForTranslate?appId=F1B50AB0743B541AA8C070890 ...
Can someone assist me, please? I'm trying to update content on a page without refreshing when a button is clicked. Currently, my approach involves using the jQuery cookie plugin to save the button's id into a cookie and then reading that value in ...
Whenever there is a change in the input, an ajax call is triggered and upon successful completion, around 80% of the content on the page gets modified. It seems that handling 2 to 3 request responses is okay, but after that, the browser hangs until the su ...
My current project involves working with Django, specifically a feature that requires loading a file and displaying its content in a textarea. Instead of storing the file on the server side or in a database, I am exploring the use of AJAX to send the file ...
I've been working on setting up a chatroom, but I've noticed that each time the page refreshes, more connections are being established. It's interesting because initially only one connection is created when I visit the chat room page. Howeve ...
After finding out from a source on Stack Overflow how to use the state parameter in Google oauth2 with PassportJS and Express, I wanted to ensure that when a user is redirected back to my Node App after signing in through Google, they are taken back to the ...
Similar Question: How to Retrieve Element By Class in JavaScript? I am looking to extract the text content from a span element that does not have an ID but only a specific class. There will be only one span with this particular class. Can anyone guide ...
I am facing an issue with the Vizio Smart TV app where a strange hover effect appears and moves when a key is pressed. The expected key press functionality does not work as intended, and it seems like Vizio's own hovering and navigation features are t ...
My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...
When I run the code in my application, there are instances where ng-init fails to trigger the $watch function. Any suggestions on how to fix this? HTML <div ng-controller="MyCtrl"> <p ng-init="stages = 'coco'">{{x}}</p> < ...
I'm curious, is there a way to determine when the object has finished rendering? While I've seen a progress bar in one example, I'm seeking a straightforward and uncomplicated illustration. So far, I've searched through the loader I&apo ...
My JavaScript data file has the following structure: data = { items : [ {name: 'ABC'}, {name: 'CDF'} ] } After passing this data to $.ajax(type: 'POST', data: data), the converted data appears like this: it ...
Presently, I am working with a component that looks like this: https://i.stack.imgur.com/qGCwj.png This is the code for the component: import React from "react"; import {withStyles} from "material-ui/styles"; import Settings from "material-ui-icons/Setti ...
Hello there! I'm currently working on a project where I need to increase the quantity of each item added to the cart if it's already in there. This is actually my first time posting, so any tips on asking better questions would be greatly appreci ...
HTML : <div class="regform"><input id="username" type="text" name="username" placeholder="Username" required><h3 class="check"><img src=''/></h3></div> <div class="regform"><input id="password" type=" ...
I have developed a Vue component that needs to perform certain logic and based on that logic, I want to render the content inside the slot. <logic-component> <div>{{ data }}</div> </logic-component> The data is retrieved using a ...
I've been struggling to vertically center the menu items "TEST 1","TEST 2" and "BRAND" within the navigation bar without any luck. I've experimented with vertical-align, margin-top, and bottom properties. What I'm aiming for is to have them ...
Here's my predicament: I have a script file called somescript.js included in the page, along with another code snippet. There are two buttons on the page - one triggers the snippet to remove an element using remove(), and the other calls a function fr ...
In the codebase I am currently working on, I came across a backend service that I would like to utilize for logging all errors along with their corresponding Http statuses. If possible, I also want to retrieve the full stack trace of these errors from this ...