Hi. I'm new to jQuery and ran into this dilemma. In the portfolio
section of my homepage ( http://invitro.vegasoftweb.com/es/ ). I have
a div with 9 items but only 3 are showing, the other 6 are hidden by
another div that has a fixed height and thus clip them. I am trying to
implement a soft transition when a "+" button is clicked and the
hidden 6 are visible.
I tried this two ways:
1. Toggling classes between the clipdiv and the fulldiv and adding a
duration value for toggleClass. However the transition doesn't work in
IE
var $s = jQuery.noConflict();
$s(document).ready(function() {
$s('a#portfolio-morelink').click(function() {
$s('.portfolioclip').toggleClass('portfoliofull', 2000);
return false;
});
2. trying the "Animate - toggle height" but I can't get it to work
with a starting height so it goes from showing the 3 items to not
showing anything, instead of opening and revealing the hidden 6.
var $s = jQuery.noConflict();
$s(document).ready(function() {
$s('a#portfolio-morelink').click(function() {
$s('.portfolioclip').animate({height: auto});
return false;
});
Also, tried the "Animate height" and it does work but it doesn't
toggle, meaning you can only do it once and it won't return to
smaller.
var $s = jQuery.noConflict();
$s(document).ready(function() {
$s('a#portfolio-morelink').click(function() {
$s('.portfolioclip').animate({height:"toggle"}, 5000);
return false;
});
Any help would be highly appreciated. Thanks!