When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

Question

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

I have a sliding panel on my webpage that reveals the navigation (www.helloarchie.blue). I want the content inside the panel to fade in slowly when it slides out, and then fade out when the user clicks the icon to close the panel. How can I achieve this effect?

CSS: (targeting the div for fading in/out)

.sb-slidebar nav { text-align: left; }

HTML:

<div class="sb-slidebar sb-right sb-style-push sb-active">

<nav>
 <div class="cl-effect-5 blah">
 <a href="http://helloarchie.blue/"><span data-hover="Home">Home</span></a><br />
<a href="http://helloarchie.blue/about"><span data-hover="About">About</span></a><br />
<a href="http://helloarchie.blue/archives"><span data-hover="Archives">Archives</span></a><br />
<a href="http://helloarchie.blue/design"><span data-hover="Services">Services</span></a><br />
<a href="http://helloarchie.blue/contact-me" title="Contact Kaye at Hello Archie"><span data-hover="Contact me">Contact me</span></a><br />

</div>
</nav>
</div>

HTML (this is the icon toggle for opening the panel and initiating the fade in/out effect)

<div class="sb-toggle-right button-square menu">

  <a id="menu-toggle" href="#" class="button2">
  <span class="menu-bar bar1"></span>
  <span class="menu-bar bar2"></span>
  <span class="menu-bar bar3"></span>
  </a>

</div>

jquery html css fadein fadeout

Answer 1

Answer №1

Utilize jquery's .fadeToggle() function, just like in the illustration provided below. For more information on .fadeToggle(), refer to the documentation available here.

$(document).ready(function() {
  $('#click-me').on('click', function() {
    $('#fade-me').fadeToggle();
  });
});

#fade-me {
  background-color: red;
  width: 100px;
  height: 100px;
  display: none;
}
#click-me {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fade-me"></div>
<div id="click-me">Toggle Fade</div>

Thus, if implementing this into your code snippet, you may require something similar to:

$(document).ready(function() {
    $('.sb-toggle-right').on('click', function() {
        $('.sb-slidebar').fadeToggle();
    });
});

Answer 2

Utilize jquery's .fadeToggle() function, just like in the illustration provided below. For more information on .fadeToggle(), refer to the documentation available here.

$(document).ready(function() {
  $('#click-me').on('click', function() {
    $('#fade-me').fadeToggle();
  });
});

#fade-me {
  background-color: red;
  width: 100px;
  height: 100px;
  display: none;
}
#click-me {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fade-me"></div>
<div id="click-me">Toggle Fade</div>

Thus, if implementing this into your code snippet, you may require something similar to:

$(document).ready(function() {
    $('.sb-toggle-right').on('click', function() {
        $('.sb-slidebar').fadeToggle();
    });
});

Answer 3

Answer №2

After reviewing the classname assigned to the div element in question, it appears that a sliding plugin is being used for panel transitions. Without insight into the specific JavaScript code being utilized, it's challenging to provide a precise solution. One potential approach would involve referencing the documentation of the plugin to identify methods that can be employed to trigger functions at the onset and conclusion of animations or slides. Within these designated methods, you could include instructions to add or remove a custom classname responsible for managing the fade-in and fade-out effects of the div. This implementation might resemble the following:

JavaScript:

onSlideStart: function() {
        $(this).removeClass('fade-me-in');
},
onSlideEnd: function() {
        $(this).addClass('fade-me-in');
}

CSS

div {
    opacity: 0;
}

div.fade-me-in {
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

If this suggestion doesn't fully address your requirements, please share the relevant JavaScript snippets for further assistance.

Answer 4

After reviewing the classname assigned to the div element in question, it appears that a sliding plugin is being used for panel transitions. Without insight into the specific JavaScript code being utilized, it's challenging to provide a precise solution. One potential approach would involve referencing the documentation of the plugin to identify methods that can be employed to trigger functions at the onset and conclusion of animations or slides. Within these designated methods, you could include instructions to add or remove a custom classname responsible for managing the fade-in and fade-out effects of the div. This implementation might resemble the following:

JavaScript:

onSlideStart: function() {
        $(this).removeClass('fade-me-in');
},
onSlideEnd: function() {
        $(this).addClass('fade-me-in');
}

CSS

div {
    opacity: 0;
}

div.fade-me-in {
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

If this suggestion doesn't fully address your requirements, please share the relevant JavaScript snippets for further assistance.

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

Answer №1

Answer №2

Similar questions

Creating interactive navigation bar effects with scroll and click functionality using jQuery

Displaying list items with <output> compared to using <ul>

Positioning HTML elements using CSS and avoiding the use of tables

Sorting the Czech alphabet with the help of Tablesorter

Customize specific styles for individual divs one at a time (without the use of jQuery)

How do I switch between liking and unliking a post using Ajax's success response?

Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

Enhance the current menu item in WordPress by assigning a class to the anchor tag

Centered horizontally are images that have been floated

In what way can the jQuery .each() function make use of the index as a variable?

Background image not displaying in new tab after Chrome extension installation

Generate real-time dynamic line charts using data pulled directly from a MySQL database

Utilize Ajax to showcase MySQL query outcomes upon onClick() event

Is there a way for me to verify that the value I retrieved from my AJAX request was successfully passed to my

Feature exclusively displays malfunctioning image URLs for the web browser

Awesome C# PDF Printing Solution [closed]

Comparing React's Styled-components, JSS, and Emotion: Which is

What is the best way to make the first LI elements stand out in a nested structure by applying bold

Modify the background hue of the checkbox to resemble a button when selected

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,