CODEWITHSUNDEEP
javascriptjquerycss
user5635857
user5635857

Reputation:

Multiple jQuery actions() to happen at once?

I want my logo to change css on click, AS WELL as fadeIn..

I have tried something like this:

$(".logo").fadeIn() .css({"opacity": "1.0","height": "75px"})

Doesnt work, as well as this:

$(".logo").css({"opacity": "1.0","height": "75px"}) 
$(".logo").fadeIn();

Upvotes: 0

Views: 63

Answers (2)

Aalind Sharma
Aalind Sharma

Reputation: 423

You can do that by using animate method along with fadeIn. 

$('.logo').click(function(){

	$('.logo').fadeIn().animate({'opacity':'1','height':'75px'}, 1500);
});
.logo{
  opacity: 0.1;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="logo">Logo</span>

Check out this fiddle.

Upvotes: 0

Alexis
Alexis

Reputation: 5831

You can achieve this with css only using transition property and :active

.logo{
  background-color:yellow;
  color:red;
  padding:20px;
  transition:opacity 2s linear;
  opacity:0.3;
  }

.logo:active{
  opacity:1;
}
<span class="logo">Logo click me</span>

Upvotes: 1

Related Questions