CODEWITHSUNDEEP
jqueryhtmlcss
MayurG
MayurG

Reputation: 26

Want "slow effect" when toggle between two functions?

I want slow animation when toggle between two functions..to understand consider following toggle function.

$("p").toggle(function(){$("p").css({"color": "red"});},
function(){$("p").css({"color": "blue"});
});

how can i give "slow" as parameter in this scenario???

Upvotes: 0

Views: 65

Answers (1)

Ele
Ele

Reputation: 33726

You can use css transition:

An example:

Imagine you have a button, and when you press it yo want to change the background color of a DIV with a nice transition. So, we have a Button and a DIV, lest do it:

jsfiddle: https://jsfiddle.net/obpxsyq3/

HTML:

<button id='mybutton'>
   Try me!
</button>
<br>
    <br>
<div id='target_div'>

</div

css:

#target_div {
  background-color: #000;
  width: 200px;
  height: 200px;   
  border: 1px solid #000;
  -webkit-transition: background-color 2s; /* Safari */
  transition: background-color 2s;
}

.transition_class {
  background-color: #fff !important;
}

Javascript/Jquery:

$('#mybutton').click(function() {
  $('#target_div').addClass('transition_class');
});

I suggest you to read a little about css transitions, you're going to love!

Hope this helps!

Upvotes: 2

Related Questions