What causes the div to shift while performing the FadeIn-FadeOut effect?

It seems like there might be something that I'm overlooking, as I am encountering a minor issue with this.

I am aiming to align the "submenu div" on the right side of the Show/hide links.

Initially, when I load the div, it is correctly positioned. However, when I click on the hide/show links, the div suddenly moves to the bottom.

Is there a more efficient way to achieve this layout, or is this method sufficient? Additionally, if I prefer not to show the div upon page load, would using .hide() or hidden style be appropriate?

For reference, here is an example http://jsfiddle.net/DH75T/

Thank you in advance.

CSS

div.inline2 {
    display: inline-block;
    width: 150px;
}
div.inline {
    position:absolute;
    display: inline-block;
    border:1px solid #CCC;
    background:#FFF;
} 

JS

$(document).ready(function() {  

  $('a#show').click(function() {
    $('div#submenu').fadeIn();
  });

  $('a#hide').click(function() {
    $('div#submenu').fadeOut();
  });
});

HTML

  <div class="inline2">
    <a href="#" id="show">Show_links</a>
    <a href="#" id="hide">Hide links</a>
  </div>

  <div class="inline" id="submenu">
    <a href="#">Link 1</a><br />
    <a href="#">Link 2</a>
  </div>

Answer №1

fadeIn() now applies the style display: block; to the div, causing it to move down to the next line


The div was previously styled as inline-block

div.inline2 {
    display: inline-block;
    width: 150px;
}


Check out the fiddle demo

To achieve the effects of fadeIn and fadeOut without moving your div to the next line, use classes

$(document).ready(function () {
    $('a#show').click(function () {
        $('div#submenu').removeClass('hidden').addClass('visible');
    });

    $('a#hide').click(function () {
        $('div#submenu').addClass('hidden').removeClass('visible');
    });
});

css

.visible {
    opacity: 1;
    transition: opacity 2s linear;
}
.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

Answer №2

Give this a shot:

$(document).ready(function() {          
  $('a#display').click(function() {
    $('div#subcontent').removeClass("hide");
  });    
  $('a#conceal').click(function() {
    $('div#subcontent').addClass("hide");
  });
});

Fiddle available here.

Answer №3

Make sure to update only the jQuery section:

<script type="text/javascript">
  $(document).ready(function() {  

$('a#show').click(function() {
$( "div#submenu" ).animate({
    opacity: 1
  }, 500, function() {
    // Successfully animated.
  });
});

$('a#hide').click(function() {
$( "div#submenu" ).animate({
    opacity: 0
  }, 500, function() {
    // Animation completed.
  });
});
});</script>

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

Creating custom themes in React Native using dynamically loaded JSON data

Is it possible in React Native to override custom styles with dynamically fetched font-size and background color values from a server's JSON data? I am looking to incorporate this JSON data theme into my style themes. Can you provide the syntax for cr ...

Mouseover function ceases to function once an element is dropped

After referencing this discussion, I successfully managed to drag items from one scroll overflow to another. However, the issue arises when these items (or their clones) are in the other scroll overflow as they do not respond to .mouseover(). The goal is ...

Struggling with Javascript Arrays - despite my efforts, I have yet to find the correct solutions

Just getting started with arrays and could use some assistance! const array =["ron","rexona","danzial","alexander"]; Q1 - Create a function that will return an array containing items from array with more than 4 characters. ['alaska','orl ...

Implementing a personalized surcharge for a specific choice during the checkout process in WooCommerce

Within the WooCommerce Checkout page, a dropdown custom field for "Card type" has been incorporated with various options. Some of these options are free while others have an associated fee of $0.99. Although the fee is accurately calculated on the checkout ...

Is there really a need to go through the hassle of creating a pure javascript/jquery widget when I can simply load it into an

Previously, I had a widget with the following code: <script src="http://www.mywebsite.com/widget/widget.js?type=normal" type="text/javascript"></script> <div id="archie-container"></div> This widget checked for the presence of jQu ...

Showing and presenting Vue components using v-html

My database stores HTML content for my posts, like the example below. On the post page, I display the content using the following: <span v-html="content"></span> I'm curious about how I can make Vue Components work within HTML content fe ...

Bootstrap 4: In collapsed navbar, li items are shown horizontally beside navbar-brand

I've been troubleshooting this issue for hours. It seems like the navbar is not collapsing correctly in Bootstrap 4, causing the next list item to display to the right of the navbar-brand text instead of below it like the other items. <nav class=" ...

Navigating between different route groups using redirection: a step-by-step guide

My project folder structure is organized like this: app (app) dashboard page.tsx page.tsx layout.tsx (auth) login ...

Angular2+ allows users to easily drag and drop an image onto the screen, complete with

Check out this stackblitz link for more details: https://stackblitz.com/edit/angular6-ledera?file=app%2Fapp.component.ts I'm attempting to drag an image from the desktop and drop it directly onto the dropzone div. 1) Obtain a preview of the image 2) ...

Saving events with a Full Calendar is a seamless process that

I am encountering a problem while trying to save the end time and enable dragging across multiple days on my fullcalendar. I have configured it to save data using jQuery.post to my database, but I am struggling to populate the end value and allow it to be ...

.then function not functioning properly in Axios DELETE request in a React project

I am currently facing an issue with calling a function to update the array of notes after deleting a note from the database. The function causing the error is called deleteNote, and the function I intend to call within the .then promise is getNotes. Here i ...

Having trouble with saving the image after integrating Ajax into the code

My PHP file upload script simplifies the process, as shown below: <?php $path = 'uploads/'; $file_ext = array('jpg','png','gif','bmp','JPG'); $post_ext = end(explode('.& ...

Animating the smooth collapse of panels within listviews

I have successfully implemented a smooth animation code for a collapsible panel, and it is working wonderfully: <script type="text/javascript"> function pageLoad(sender, args) { smoothAnimation(); } function smoothAnimation() ...

Issues with the functionality of the WordPress plugin

The issue with Spin360: All scripts are linked in functions.php add_action('wp_footer', 'add_scripts'); function add_scripts() { if(is_admin()) return false; wp_deregister_script('jquery'); wp_enqueue_script ...

The payload is properly returned by the Reducer, however, the component is receiving it as

In my current project, I am developing an application that involves fetching data from a firebase database. This particular database does not require authentication, and I have already adjusted the access rules to allow for public access. One of the actio ...

Issue with opening mobile app from deep link in HTML email

My HTML form contains a deeplink that is submitted through the SendGrid API on nodeJS. After sending the email, users can view it but are unable to click on the deeplink. <!DOCTYPE html> <html> <head> ...

What is the method to determine the inviter on Discord.js?

Hi there! I'm currently working on an Invite Logger and could use some assistance. I'm having trouble figuring out how to identify the user who invited another user. client.on('guildMemberAdd', async (member) => { const channel = ...

Is there a way to locate a specific word within a sentence using JavaScript

I have these lists of answers: For example: const answerList = [{index: 2, answer: nice}, {index: 5, answer: sunday} ...] similar to that Also, I have a sentence: For instance: "hi i'm theo nice to meet you. how are you" My goal is to identify ...

Django: Getting two separate variables' values in an AJAX POST call

I am facing an issue while trying to send two different values from two separate dropdowns to my Django view. Unfortunately, only the value from the first dropdown is reaching the view. Let's take a look at the following view: def MyView(request): ...

Do you have any tips on incorporating a sinking hover effect to an image or link?

Custom Arrow Icon I Want to Add Animation To I have designed an arrow icon image that functions as a link. It is positioned on top of a background image. When the user hovers over the arrow, I would like to implement a "sink" effect similar to the example ...