http://jsfiddle.net/motocomdigital/uTV5k/18/
I've updated using toggle instead on click - though still can't get smooth alternations.
I've got a mix of javascript and jquery here.
I'm trying to get an element, so when it is clicked, it runs an animation (open). And on the second click, the animation runs to the starting point (close).
But for some reason I can't get the second click alternation to work. Can anyone advise on what I'm doing wrong? Thanks
The $('.home-module').toggle
is the bit I'm having problems with.
See script below...
$(window).load(function(){
$(window).bind("orientationchange resize", function(e) {
$('.home-module').each(function() {
var homeModule = $(this).height(),
homeTitle = $(this).find('.home-title-button').outerHeight(),
homeStart = homeModule - homeTitle,
homeOpen = false;
$(this).find('.home-title').css("top", homeStart + "px");
$('.home-module').toggle(
function() {
// first alternation
$(this).find('.home-title').animate({ top: homeStart + "px" });
},
function() {
// second alternation
$(this).find('.home-title').animate({ top: 0 + "px" });
}
);
});
}).trigger("resize");
});
It seems to be really unresponsive on the click to animations, and the second click/alternation is really delayed and does strange things?
Thanks
My original code...
$(window).load(function(){
$(window).bind("orientationchange resize", function(e) {
$('.home-module').each(function() {
var homeModule = $(this).height(),
homeTitle = $(this).find('.home-title-button').outerHeight(),
homeStart = homeModule - homeTitle,
homeOpen = true;
$(this).find('.home-title').css("top", homeStart + "px");
$('.home-module').on('click', function () {
if (homeOpen) {
$(this).find('.home-title').animate({ top: homeStart + "px" });
homeOpen = false;
} else {
$(this).find('.home-title').animate({ top: 0 + "px" });
homeOpen = true;
}
});
});
}).trigger("resize");
});
homeOpen
is always set to false so your if (homeOpen)
condition is never satisfied.