CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marcos J.C Kichel
Marcos J.C Kichel

Reputation: 7219

How to create a content smooth transition

I have 2 div, div1 is actually showing when page loads, div2 is not, when user clicks link1 I need to have a smooth transition between div1 to div2.

I've searched and find some workarounds with jquery and other libraries, but I just cant manage to do it right. If someone could help me out it would be great.

Upvotes: 1

Views: 100

Answers (2)

sjm
sjm

Reputation: 5468

Use CSS3 transitions on properties that will trigger Hardware Acceleration in browsers i.e the CSS Opacity property

transition:opacity 1s ease;

To trigger the tranisiton just add a hide class to div1 via JS which sets the opacity to zero

.hide{opacity:0;visibility:hidden;}

Vanilla JS version here http://jsfiddle.net/sjmcpherso/L3fg08zp/

with jQuery to toggle the class you could use:

$('#change').on('click',function(){
    $("#div1").toggleClass('hide');
});

Upvotes: 2

xaviert
xaviert

Reputation: 5932

You could have a look at jQuery.fadeIn and jQuery.fadeOut. See the "Demo" parts of the page for a demonstration.

Upvotes: 1

Related Questions