I'm growing very frustrated, I'm able to add Jquery animation on my site, but I have not been able to add the event handling with any sucess, I have tried attaching the js file through .info or the template file. Its still not working. I have tried wrapping code with behaviors its still not working. What I'm trying to do is to create several animations base on the click event. Is the behaviors code wrong? or do it need more drupal code needed for complex animation? Do I need to create a custom module for the js file ? and how would I do that?

(function($) {
Drupal.behaviors.sminteractive = {
attach: function (context) {

$('.seo-service', context).click(
function() {

$('.designhead').css('display','none');
$('.design-content').css('display','none');
$('.seo-main-content').css('height','100px');

$('#respond-pic').fadeOut(1000);
$('#msoffice-pic').fadeOut(1000);
$('#adobe-pic').fadeOut(1000);
$('#wordpress-pic').fadeOut(1000);
$('#drupal-pic').fadeOut(1000);

$('#seo-bg').animate({backgroundPosition: '0px -150px'
});

$('.col-md-12').css('display', 'none');

$('#seo-diagram').css('paddingTop','303px').fadeIn(5000);
$('#search1').css('marginTop','270px').animate({
left: '550px'
}, 1000);
$('#search2').css('marginTop','275px').animate({
left: '380px'
}, 1000);
$('#search3').css('marginTop','275px').animate({
left: '209px'
}, 1000);
$('#search4').css('marginTop','275px').animate({
left: '40px'
}, 1000);

$('.powertitle').animate({
opacity: '0'
});

$('.mainhead').css('display','block').animate({
marginTop: '150px'
}, 4000);

$('.seo-content').animate({
opacity: '1.0',
left:'360px'
},3000).toggle();

});
}

};

})(jQuery);

PLEASE HELP!

Comments

Jaypan’s picture

Please wrap your code in code tags for readability.