hi there,
i'm doing an animation which is split in two section which are split in two theme selfs.
the first step is to move some elements with the .show class, than change them class into .hide.
the second step is to change the classes (.hide) of some hide elements into .show class; one achieved that the changed items has to move.
the result is that the first part of the first step is totally ignored when you try to switch from a service to an other (the services are "isp", "videosorveglianza", "assistenza da remoto", they are clickable elements which let you navigate through the contents); instead if you click the same service botton of the currently one displayied you'll get the correct and whole effect. i've tryied to remove the .show class using the .animate callback function for each element animated (in the first part of the first section), but the resoult is worst.
here is the example page: neticom.omnigrafica.it
here is the script:
- $(function (isp) {
- $('#n_isp') .click (function(){
- $('div#loghi>div.show') .animate({marginLeft: "93px"}, 500)
- $('div#opaco>div.show') .animate({marginTop: "22px"}, 500)
- $('div#trasparente>div.show') .animate({marginTop: "-20px"}, 500)
- $('div#testi>div.show') .animate({marginLeft: "-620px"}, 500)
- $('div#loghi>div.show, div#opaco>div.show, div#trasparente>div.show') .removeClass('show') .addClass('hide')
- $('#logo1, #opaco1, #trasparente1, #testo_isp') .removeClass('hide').addClass('show')
- $('#logo1') .animate({ marginLeft: "0px"}, 500 )
- $('#opaco1, #trasparente1') .animate({marginTop: "0px"}, 500 )
- $('#testo_isp') .animate({marginLeft: "0px"}, 500 )
- })
- });
- $(function (video) {
- $('#n_video') .click (function(){
- $('div#loghi>div.show') .animate({marginLeft: "93px"}, 500)
- $('div#opaco>div.show') .animate({marginTop: "22px"}, 500)
- $('div#trasparente>div.show') .animate({marginTop: "-20px"}, 500)
- $('div#testi>div.show') .animate({marginLeft: "-600px"}, 500)
- $('div#loghi>div.show, div#opaco>div.show, div#trasparente>div.show') .removeClass('show') .addClass('hide')
- $('#logo2, #opaco2, #trasparente2, #testo_video') .removeClass('hide').addClass('show')
- $('#logo2') .animate({ marginLeft: "0px"}, 500 )
- $('#opaco2, #trasparente2') .animate({marginTop: "0px"}, 500 )
- $('#testo_video') .animate({marginLeft: "0px"}, 500 )
- })
- });
- $(function (remoto) {
- $('#n_remoto') .click (function(){
- $('div#loghi>div.show') .animate({marginLeft: "93px"}, 500)
- $('div#opaco>div.show') .animate({marginTop: "22px"}, 500)
- $('div#trasparente>div.show') .animate({marginTop: "-20px"}, 500)
- $('div#testi>div.show') .animate({marginLeft: "-650px"}, 500)
- $('div#loghi>div.show, div#opaco>div.show, div#trasparente>div.show') .removeClass('show') .addClass('hide')
- $('#logo3, #opaco3, #trasparente3, #testo_remoto') .removeClass('hide').addClass('show')
- $('#logo3') .animate({ marginLeft: "0px"}, 500 )
- $('#opaco3, #trasparente3') .animate({marginTop: "0px"}, 500 )
- $('#testo_remoto') .animate({marginLeft: "0px"}, 500 )
- })
- });
some help will be really
esteemed!!
thank you!