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

Implementing a function in jQuery to create a "Check All" and "Uncheck All" button

Bootstrap slider with fading in and out effects

Is the img tag supported by html2image?

CSS slideshow animation is not functioning properly

Proper positioning of popover ensures it does not exceed the boundaries of its parent

Retrieve a boolean value through an Ajax call from a C# function using T4MVC

Why is the Material UI React select not selecting all children except for the last one?

JavaScript Tab Fade Effect

Displaying a div on click using Jquery will only impact one div at a time

After populating dropdown values with Ajax in Yii2 Kartik, the dependent dropdown does not update the selected value through Ajax

JavaScript - Clear the localStorage when closing the final tab of a website

Why does it seem like only one div is being added?

Waiting for the listener script to finish its task in an Ajax call and then informing the user

The height of the content in the polymer core-scaffold cannot be set to 100%

Determine future dates based on selected date and time

What is the best method for inserting space between two divs?

What is the process for including the posting date in the JSON format while using the Instagram

What could possibly be causing issues with this query to the database?

Attempting to make initials fade and slide out upon mouseover using jQuery

Is it possible for me to add images to the input file individually before submitting them all at once?