Looking to switch up the hide/show toggle animation?

Question

Looking to switch up the hide/show toggle animation?

Currently, I have a functioning element with the following code. It involves an object named #obj1 that remains hidden upon page load but becomes visible when #obj2 is clicked.

#obj1{
    position:fixed;  
    width:100px;  
    bottom:180px;
    right:100px; 
    display:none;
}

$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});

My goal is to modify it as follows:

$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});

To achieve a fading effect, how can I incorporate this animation into the initial script? (example animation: .animate({"opacity": "1","bottom": "140"}, "slow");)

javascript jquery css

Answer 1

Answer №1

Learn how to create a smooth fade-in effect for an element using CSS with this easy demo. Utilize jQuery to apply the necessary class through a click event.

// HTML
<div id="myId" class="hide">
  This is a div with myId
</div>

// CSS
.hide {
  display: none;
}
.myId {
  animation: fadein 2s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

// JQUERY
$("#myId").removeClass("hide").addClass("myId");

View the live demonstration here. Simply adjust it to activate on the click of obj2 or any other desired element.

UPDATE - In response to your feedback, I have updated the pen so that the element starts hidden on page load, then dynamically removes the hiding class and applies the animation class for a seamless transition.

Answer 2

Learn how to create a smooth fade-in effect for an element using CSS with this easy demo. Utilize jQuery to apply the necessary class through a click event.

// HTML
<div id="myId" class="hide">
  This is a div with myId
</div>

// CSS
.hide {
  display: none;
}
.myId {
  animation: fadein 2s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

// JQUERY
$("#myId").removeClass("hide").addClass("myId");

View the live demonstration here. Simply adjust it to activate on the click of obj2 or any other desired element.

UPDATE - In response to your feedback, I have updated the pen so that the element starts hidden on page load, then dynamically removes the hiding class and applies the animation class for a seamless transition.

Answer 3

Answer №2

It is recommended to keep the styles in CSS and utilize JavaScript to manipulate the state by adding or removing classes. The current JavaScript implementation is acceptable, but it would be more efficient if the class toggling is based on itself to prevent accidental desynchronization:

$('#obj2').on('click',function(e){
  e.preventDefault();
  if($('#obj1').hasClass('js-on'))
    $('#obj1').removeClass('js-on');
  else
    $('#obj1').addClass('js-on');
});

    #obj1{
        position:absolute;  
        width:100px;  
        bottom:10px;
        right:20px; 
        opacity: 0;
        
        background-color: yellow;
        padding: 1em;
        
        transition: .5s opacity, .5s bottom;
    }
    #obj1.js-on {
        opacity: 1;
        bottom: 40px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>

<div id="obj1">Hi</div>

Answer 4

It is recommended to keep the styles in CSS and utilize JavaScript to manipulate the state by adding or removing classes. The current JavaScript implementation is acceptable, but it would be more efficient if the class toggling is based on itself to prevent accidental desynchronization:

$('#obj2').on('click',function(e){
  e.preventDefault();
  if($('#obj1').hasClass('js-on'))
    $('#obj1').removeClass('js-on');
  else
    $('#obj1').addClass('js-on');
});

    #obj1{
        position:absolute;  
        width:100px;  
        bottom:10px;
        right:20px; 
        opacity: 0;
        
        background-color: yellow;
        padding: 1em;
        
        transition: .5s opacity, .5s bottom;
    }
    #obj1.js-on {
        opacity: 1;
        bottom: 40px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>

<div id="obj1">Hi</div>

Answer 5

Answer №3

$(document).ready(function() {
$("#element1").hide();
$("#element2").show();
});

$('#element2').toggle(function(){
$("#element1").slideToggle();
});

To make element1 fade in when element2 is clicked, you can try the following:

$("#element2").click(function () {
$("#element1").fadeToggle("slow","swing");

This will toggle the fading in and out of element1.

For more information, visit: http://api.jquery.com/fadetoggle/

Answer 6

$(document).ready(function() {
$("#element1").hide();
$("#element2").show();
});

$('#element2').toggle(function(){
$("#element1").slideToggle();
});

To make element1 fade in when element2 is clicked, you can try the following:

$("#element2").click(function () {
$("#element1").fadeToggle("slow","swing");

This will toggle the fading in and out of element1.

For more information, visit: http://api.jquery.com/fadetoggle/

Answer 7

Answer №4

Feeling a bit unsure about the question, but I'll give it a shot with my answer: hope this helps

$(".obj1").click(function(){
 $(".obj2").css('opacity', 0)
  .slideDown('slow')
  .animate(
    { opacity: 1 },
    { queue: false, duration: 'slow' }
  );
});

.obj1 {
  display: inline-block;
  padding: 10px;
  background: lightgrey;
}

.obj2 {
  height: 100px;
  width: 100px;
  background: red;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="obj1">click me</div>
<div class="obj2"></div>

Answer 8

Feeling a bit unsure about the question, but I'll give it a shot with my answer: hope this helps

$(".obj1").click(function(){
 $(".obj2").css('opacity', 0)
  .slideDown('slow')
  .animate(
    { opacity: 1 },
    { queue: false, duration: 'slow' }
  );
});

.obj1 {
  display: inline-block;
  padding: 10px;
  background: lightgrey;
}

.obj2 {
  height: 100px;
  width: 100px;
  background: red;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="obj1">click me</div>
<div class="obj2"></div>

Looking to switch up the hide/show toggle animation?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A step-by-step guide on integrating Google Tag Manager with a NextJS website

Implementing Google Ads Code in NextJS for Automated Units

Ways to customize the appearance of Angular material elements one by one?

What is the best way to compress JSON responses?

Disappear notification with jQuery after a set amount of time

sort jquery alphabetical characters

What steps can be taken to ensure your bot successfully sends the second argument?

Executing complex queries in mongoose using the $or operator

Display or conceal a div depending on the selected radio button

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

VueJS advisory: Refrain from directly altering a prop

Ruby on Rails allows for the selection of values in a dropdown menu to trigger the visibility of different sections of HTML

Modify the background color of <td> elements depending on the specific value

What are the best techniques for centering a prime ng form both vertically and horizontally?

Show one line of text at a time with a pause in between each one

Clicking within the text activates the dropdown menu, but clicking outside the text does not

What is the best way to display overflow on my website without using the overflow attribute?

Attempting to display the todo item in the form of <li>, however, the todo.name property is not

Two indispensable tools for web development - Internet Explorer and ajaxStart/ajaxStop

Tips on sending an array to material-ui dataSource props