CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sylent
Sylent

Reputation: 514

Issues animating a button

I have some issues with animating a button. First I made the buttons appear after the window was loaded with this code:

$(window).on('load',() => { // console.log("content loaded") $('.button').delay(1000).fadeIn(3000) });

This did what I wanted, fade in after 1 second. Then I made some CSS:

.wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}

.button {
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  background-repeat:no-repeat;
  width: 150px;
  padding: 20px;
  color: #000; 
  border: 3px solid rgb(48, 48, 48);
  border-radius: 20px 20px 20px 20px;
  margin:0 5px;
  transition: ease 1s;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: :3px solid rgb(35, 35, 35);
  border-radius: 10px 10px 10px 10px;
  transition: ease 1s;
}

And I have this HTML:

<div class="wrapper">
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
</div>

With this CSS the buttons don't fade in anymore and just popup after 1 second. Any ideas what caused this or did I do something stupid (probably the case :D)?

Thanks if you can help!

Upvotes: 0

Views: 61

Answers (3)

Rahele Dadmand
Rahele Dadmand

Reputation: 573

try this using opacity :

$( document ).ready(function() {
   $('.button').delay(1000).fadeTo( "slow", 1 );
});
.wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}

.button {
opacity:0;
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  background-repeat:no-repeat;
  width: 150px;
  padding: 20px;
  color: #000; 
  border: 3px solid rgb(48, 48, 48);
  border-radius: 20px 20px 20px 20px;
  margin:0 5px;
  transition:1s ease-in-out;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: :3px solid rgb(35, 35, 35);
  border-radius: 10px 10px 10px 10px;
  transition: ease 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
</div>

Upvotes: 0

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

I made a small change to the js. Hope this is what you wanted

$(document).ready(function(){
 console.log("content loaded")
 $('.button').fadeIn('slow');
  $('.button').fadeIn(3000);
  });
.wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}

.button {
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  background-repeat:no-repeat;
  width: 150px;
  padding: 20px;
  color: #000; 
  border: 3px solid rgb(48, 48, 48);
  border-radius: 20px 20px 20px 20px;
  margin:0 5px;
  transition: ease 1s;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: :3px solid rgb(35, 35, 35);
  border-radius: 10px 10px 10px 10px;
  transition: ease 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
</div>

Upvotes: 1

sandy
sandy

Reputation: 303

All the button element have same id value. Id should be unique per element.

Upvotes: 0

Related Questions