css transition not functioning with jquery

Question

I'm trying to add a css transition effect to an element as below:

$('.trans-opener').click(function () { $(this).nextAll().slice(0, 3).toggleClass('trans-hidden'); });

.row{ padding: 50px; } .trans-hidden { display: none; position: absolute; right: 15px; } ul{ list-style:none; margin:0px; padding:0px; } ul li { float: right; padding-left: 15px; } ul li .icon { height: 32px; width: 32px; background-color: #cdcdcd; line-height: 35px; border-radius: 50%; transition: all 0.3s; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-3"> <div></div> </div> <div class="col-xs-9"> <ul> <li class="trans-opener"><a href="#"><div class="icon"><i class="fa fa-ellipsis-h"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-facebook"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-twitter"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-heart"></i></div></a> </li> </ul> </div> </div>

When I click on the (...) three dots icon, the other icons appear. But I'm trying to give transition effect to the icons. I tried transition: all 0.3s; but it's not working. Any help would be greatly appreciable.

http://jsfiddle.net/nwy333pe/

Thanks in advance.

you are making them dissappear/reappear by toggling display:none;. Display is not an animatable property (oli.jp/2010/css-animatable-properties) — chiliNUT
– chiliNUT, Commented Nov 24, 2015 at 20:23

Racil Hilan · Accepted Answer · 2015-11-24 21:03:47Z

You probably can achieve that much easier with jQuery fadeIn() function, like this:

$('.trans-opener').click(function () { $(this).nextAll().slice(0, 3).fadeToggle(); });

.row{ padding: 50px; } .trans-hidden { display: none; /*position: absolute;*/ right: 15px; } ul{ list-style:none; margin:0px; padding:0px; } ul li { float: right; padding-left: 15px; } ul li .icon { height: 32px; width: 32px; background-color: #cdcdcd; line-height: 35px; border-radius: 50%; transition: all 0.3s; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-3"> <div></div> </div> <div class="col-xs-9"> <ul> <li class="trans-opener"><a href="#"><div class="icon"><i class="fa fa-ellipsis-h"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-facebook"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-twitter"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-heart"></i></div></a> </li> </ul> </div> </div>

If you want them to unfold (i.e. move right), you need to specify the location for each of them individually. Try this:

$('.trans-opener').click(function () { var icons = $(this).nextAll().slice(0, 3) if(icons.is(":visible")){ $(icons).animate({right: 60}, function(){ icons.toggle(); }); } else{ icons.toggle(); $(icons[0]).animate({right: 200}); $(icons[1]).animate({right: 150}); $(icons[2]).animate({right: 100}); } });

.row{ padding: 50px; } .trans-hidden { display: none; position: absolute; right: 60px; } ul{ list-style:none; margin:0px; padding:0px; } ul li { float: right; padding-left: 15px; } ul li .icon { height: 32px; width: 32px; background-color: #cdcdcd; line-height: 35px; border-radius: 50%; transition: all 0.3s; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-3"> <div></div> </div> <div class="col-xs-9"> <ul> <li class="trans-opener"><a href="#"><div class="icon"><i class="fa fa-ellipsis-h"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-facebook"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-twitter"></i></div></a> </li> <li class="trans-hidden"><a href="#"><div class="icon"><i class="fa fa-heart"></i></div></a> </li> </ul> </div> </div>

If you want it to toggle, then use fadeToggle(). I've updated my answer.
This works, but I was trying for something in which the icons moves from right to the left.
You need to describe your requirements clearly in your question, so can help you without having to go back and forth between the comments. See my updated answer, I think the second code gives you want you want.

VahagnNikoghosian · Accepted Answer · 2015-11-24 20:46:13Z

You can use keyframes, for making icons animatable, first you must set display:block in early step of animation. For fadeIn animation you can use.

ul li .icon { height: 32px; width: 32px; background-color: #cdcdcd; line-height: 35px; border-radius: 50%; animation: fadeInCustom 1s; } @keyframes fadeInCustom { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } }

Collectives™ on Stack Overflow

css transition not functioning with jquery

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related