Jquery Animate ScrollLeft不工作在ipad上 [英] Jquery Animate ScrollLeft doesnt work on ipad

问题描述

http://remedia-solutions.com/clientes/0039_kiplingmexico/demo2/

此代码将html，body移动到另一个部分。它在PC和mac上完美工作。

在这种情况下，它会移动到索引部分。

  $（＃ini）。click（function（）{
 if（$（＃todolocal）。css（left）=='0px' 
 $（＃todolocal）。animate（{left：'3500px'}，1000，'easeInOutQuad'，function（）{
 $（＃todolocal）。css（'left' '-2500px'）
 $（'html，body'）。stop（true，false）.animate（{
 scrollLeft：$（＃todoini）。offset（）。left，
 scrollTop：0}，650）; 
 $（'＃todoini'）。stop（true，false）.animate（{
 scrollTop：0}，650）; 
 lugar = 0; 
 window.location.hash =''; 
 document.title =Kipling：Inicio; 
 $（＃ini）。addClass（'focusini'）; 
 $（＃hist）。removeClass（'focushist'）; 
 $（＃col）。removeClass（'focuscoleccion'）; 
 $（＃cuid）。removeClass 'focuscuidados'）; 
 $（＃suc）。removeClass（'focussucursales'）; 
 $（＃cont）。removeClass（'focuscontacto'）; 
 return false; 
}）; 
} 
 if（$（＃todobolsas）。css（left）=='0px'）{
 $（＃todobolsas）。animate（{left： 3500px'}，1000，'easeInOutQuad'，function（）{
 $（＃todobolsas）css（'left'，'-2500px'）
 $（'html，body'）。 stop（true，false）.animate（{
 scrollLeft：$（＃todoini）offset（）。left，
 scrollTop：0}，650）; 
 $ todoini'）。stop（true，false）.animate（{
 scrollTop：0}，650）; 
 lugar = 0; 
 window.location.hash =''
 document.title =Kipling：Inicio; 
 $（＃ini）。addClass（'focusini'）; 
 $（＃hist）。removeClass（'focalushist'）; 
 $（＃col）。removeClass（'focuscoleccion'）; 
 $（＃cuid）。removeClass（'focuscuidados'）; 
 $（＃suc）。removeClass 'focussucursales'）; 
 $（＃cont）。removeClass（'focuscontacto'）; 
 return false; 
}）; 
} 
 else {
 $（'html，body'）。stop（true，false）.animate（{
 scrollLeft：$（＃todoini）。offset ）.left，
 scrollTop：0}，650）; 
 $（'＃todoini'）。stop（true，false）.animate（{
 scrollTop：0}，650）; 
 lugar = 0; 
 window.location.hash =''
 document.title =Kipling：Inicio; 
 $（＃ini）。addClass（'focusini'）; 
 $（＃hist）。removeClass（'focushist'）; 
 $（＃col）。removeClass（'focuscoleccion'）; 
 $（＃cuid）。removeClass（'focuscuidados'）; 
 $（＃suc）。removeClass（'focussucursales'）; 
 $（＃cont）。removeClass（'focuscontacto'）; 
 return false; 
} 
}）; 
  

任何想法？

解决方案

我解决它的动画只有一次，而不是在同一时间，它的工作：）

  $（'html，body'）。stop（true，false）.animate（{
 scrollLeft：$（＃todoini）。 b $（this）.stop（true，false）.animate（{scrollTop：0}）
}）; 
 $（'＃todoini'）。stop（true，false）.animate（{
 scrollTop：0}，650）; 
 lugar = 0; 
 window.location.hash =''; 
 document.title =Kipling：Inicio; 
 $（＃ini）。addClass（'focusini'）; 
 $（＃hist）。removeClass（'focushist'）; 
 $（＃col）。removeClass（'focuscoleccion'）; 
 $（＃cuid）。removeClass（'focuscuidados'）; 
 $（＃suc）。removeClass（'focussucursales'）; 
 $（＃cont）。removeClass（'focuscontacto'）; 
  

So im developing this site it works perfectly on pc and mac but on ipad im having problems with the navigation.

http://remedia-solutions.com/clientes/0039_kiplingmexico/demo2/

This code moves the html,body to another section. It works perfectly on pc and mac. But when im on ipad it just doesnt work.

In this case it moves to the index section.

$("#ini").click(function() {
        if($("#todolocal").css("left") == '0px'){
            $("#todolocal").animate({left: '3500px'}, 1000,'easeInOutQuad',function(){
            $("#todolocal").css('left', '-2500px')
            $('html,body').stop(true,false).animate({
                scrollLeft: $("#todoini").offset().left ,
                scrollTop: 0}, 650);
         $('#todoini').stop(true,false).animate({
                scrollTop: 0 }, 650);
                lugar= 0;
                window.location.hash = '';
                document.title="Kipling: Inicio";
                $("#ini").addClass('focusini');
                $("#hist").removeClass('focushist');
                $("#col").removeClass('focuscoleccion');
                $("#cuid").removeClass('focuscuidados');
                $("#suc").removeClass('focussucursales');
                $("#cont").removeClass('focuscontacto');
                return false;
        });
        }
        if($("#todobolsas").css("left") == '0px'){
            $("#todobolsas").animate({left: '3500px'}, 1000,'easeInOutQuad',function(){
            $("#todobolsas").css('left', '-2500px')
            $('html,body').stop(true,false).animate({
                scrollLeft: $("#todoini").offset().left ,
                scrollTop: 0}, 650);
         $('#todoini').stop(true,false).animate({
                scrollTop: 0 }, 650);
                lugar= 0;
                window.location.hash = ''
                document.title="Kipling: Inicio";
                $("#ini").addClass('focusini');
                $("#hist").removeClass('focushist');
                $("#col").removeClass('focuscoleccion');
                $("#cuid").removeClass('focuscuidados');
                $("#suc").removeClass('focussucursales');
                $("#cont").removeClass('focuscontacto');
                return false;
        });
        }
        else{
        $('html,body').stop(true,false).animate({
                scrollLeft: $("#todoini").offset().left ,
                scrollTop: 0}, 650);
         $('#todoini').stop(true,false).animate({
                scrollTop: 0 }, 650);
                lugar= 0;
                window.location.hash = ''
                document.title="Kipling: Inicio";
                $("#ini").addClass('focusini');
                $("#hist").removeClass('focushist');
                $("#col").removeClass('focuscoleccion');
                $("#cuid").removeClass('focuscuidados');
                $("#suc").removeClass('focussucursales');
                $("#cont").removeClass('focuscontacto');
                return false;
            }
    });

Any ideas?

解决方案

I solve it by animating only once at a time not at the same time and it worked :)

$('html,body').stop(true,false).animate({
                scrollLeft: $("#todoini").offset().left}, 650,function(){
                    $(this).stop(true,false).animate({scrollTop:0})
                });
         $('#todoini').stop(true,false).animate({
                scrollTop: 0 }, 650);
                lugar= 0;
                window.location.hash = '';
                document.title="Kipling: Inicio";
                $("#ini").addClass('focusini');
                $("#hist").removeClass('focushist');
                $("#col").removeClass('focuscoleccion');
                $("#cuid").removeClass('focuscuidados');
                $("#suc").removeClass('focussucursales');
                $("#cont").removeClass('focuscontacto');

这篇关于Jquery Animate ScrollLeft不工作在ipad上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！