Utilize jQuery to animate the concealment of elements in my sidebar

On my webpage, there is a sidebar that behaves in a specific way when the browser is resized. Items are only displayed if they are able to fit within the visible portion of the window. This functionality can be seen in action on the jsFiddle provided.

http://jsfiddle.net/MJ9VC/23/

To test this feature, try resizing the browser window. You'll notice that some items disappear when the window height decreases, and reappear when the window height increases.

The issue at hand: While I have successfully implemented a smooth animation for items transitioning from not being displayed to being displayed, I have encountered difficulty with the reverse transition, from displayed to not displayed.

Am I explaining this clearly enough?

jquerycss

Answer â„–1

Check out the solution provided below: 

if (y <= itemBottom) {
    if(!that.hasClass('hidden') && !that.is(':animated')){
        that.removeClass('visible').addClass('hidden','slow'); 
    }
}
else{
    if(that.hasClass('hidden') && !that.is(':animated')){
        that.addClass('visible','slow').removeClass('hidden');
    }
}

Remember, the order of adding/removing hidden/visible is crucial. It's best not to make changes while the element is in the process of fading in/out. Additionally, JQuery UI is required for animating the addition of a class:

See a demonstration here: http://jsfiddle.net/AlienWebguy/jrvsB/

Answer â„–2

I think the issue stems from hiding the element by setting the visibility property to hidden

that.css('visibility','hidden');

Once you do that, the element will disappear, regardless of the opacity level you set.

Instead of using the visibility attribute, have you tried using opacity alone? For example, when the browser window is too small, you could do:

that.animate({ 'opacity': 0 });

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

Added the .active state to the menu navigation successfully, however the active color was not implemented

My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...

jqueryhtmlcsswordpress

Long X-axis labels on D3 chart causing overlap issue

I am facing an issue with my D3 Bar chart where the X-Axis labels are overlapping. Here is the code snippet that I have: // implementing word wrapping for x axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height ...

javascriptcssd3.jsvisualizationoverlap

Submit form in a new tab and refresh the current page

It seems like my mind is hitting a roadblock, I'm having trouble finding a better solution for this particular issue: I need to send a form via POST method (with data handling on the server) and have it open in a new tab with a custom URL containing ...

javascriptjqueryajaxformstabs

Is JQuery Mobile panel still not functioning properly with JQuery 2.0.3?

Experiencing issues with loading JQM panels. Using Jquery v2.0.3 and JQM v1.3.2. The JS console is showing the following error: Uncaught TypeError: Cannot read property 'options' of undefined Line# jquery.mobile-1.3.2.js:10330 After some resea ...

jqueryjquery-mobilejquery-mobile-paneljquery-2.0

The script for choosing pages is malfunctioning

I'm having trouble with a script on my website. It works on the index page, but not on other pages. <div id="pages"></div>   <script>      a = location.href;      b = a.split('-');      c = b.length;    ...

javascriptjqueryajax

Unable to create follow/unfollow feature with jquery ajax

Issue: While the database part for following and unfollowing actions is functioning correctly, there seems to be a problem with the jQuery and Ajax section. The follow button changes to unfollow (with some CSS styling) only after refreshing the page, rathe ...

javascriptphpjqueryhtmlajax

Javascript Calculator with Dual Input Fields

I have been given a task to create a calculator by tomorrow using Javascript. Unfortunately, I am currently taking a distance course and Javascript has just been introduced in this assignment. While I am familiar with HTML and CSS, Javascript is something ...

javascripthtmlcss

The input form is experiencing issues with the .change event on the drop down selector, specifically with dynamically generated choices

Currently, I am working on a form that allows users to add or remove up to three vehicles. Each vehicle requires the user to select a year, make, and model. However, I have encountered an issue where if a user selects three vehicles and then decides to cha ...

jqueryajaxonchange

Is there a way to convert an array into a single comma-separated value using parameters?

Is there a way to parameterize an array as a single name-value pair that is comma separated? I have tried using jQuery $.param, but it creates a parameter for each value in the array instead of just one. Unfortunately, it seems that there is no option or s ...

javascriptjquery

What is the best way to horizontally align an inline div using CSS?

Is it possible to apply CSS to center an inline div that has an unknown width? Note: The width of the div cannot be specified beforehand. ...

csshtmlcenter

Enhance the appearance of your responsive embedded video with a stylish border

I'm attempting to give a decorative border to a flexible embedded video. I've experimented with two different techniques to display the video: 1. <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsiv ...

htmlcssvideobootstrap-4

Creating custom designs for a HTML button using CSS

Within an HTML form, there are two buttons set up as follows: <button kmdPrimaryButton size="mini" (click)="clickSection('table')">Table View</button> <button kmdPrimaryButton size="mini" (click)=&quo ...

htmlcsstypescript

Struggling with Implementing a Hollow Button in Bootstrap 3

Could you please review This Demo and provide guidance on how to remove the grey background color when clicking on the button? I attempted the following: .btn-hallow:hover{ background: none; color: aliceblue; } .btn-hallow.active:focus{ backg ...

twitter-bootstrapcsstwitter-bootstrap-3

Optimize your Number Selector to the maximum capacity

I am in search of a way to implement a max option on my function. I am contemplating whether using data attributes on the input is the best approach, but I have a feeling there might be a more straightforward solution in jQuery. It's important to note ...

jquery

Attempting to add text one letter at a time

Hey there! I'm new to JavaScript and Jquery, and I need some help. My goal is to display text letter by letter when a button is clicked using the setTimeout function. However, I seem to be encountering some issues. Any assistance would be greatly appr ...

javascriptjquerysettimeout

When the div alters the content

Is it possible to hide a div after another div changes its content with a button click? For example, when I click on the submit button, the <div id="dynamic">1</div> changes to <div id="dynamic">2</div>. Once it ...

javascriptjquery

CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code : .logo { display: inline-block; width: 30px; position: absolute; top: 50%; opacity: 0; transition: 0.6s; } .container:hover .logo { opacity: 1; transition: 0.6s; } .container:hover .pictur ...

htmlcss

Ensure that the top of a div stays in place as the user scrolls, and spans the entire width of the div

My goal is to create a sticky or fixed position header inside a div with a list, but I'm facing an issue where it only sticks to the width of the text. If I expand the width to 100%, it takes up the size of the entire page: import styled from 'st ...

htmlcssreactjsstyled-components

Tips for translating an HTML webpage from Arabic to English

I have a bootstrap site with HTML pages but no backend functionality. How can I manually translate from Arabic to English, given that I already have the translations for all content and don't need to rely on translation tools? Is there a way to map Ar ...

javascripthtmlcssjsonbootstrap-4

Issue with binding background images to DIV elements in Angular 4 CSS

Here is a template example: <div [style.background-image]="profileImage" ></div> In the TypeScript file: We declare private profileImage: any; and use DomSanitizer for security. Fetching photo from service: We set this.profileImage using b ...

cssangulartypescript