jquery animation de marginLeft provoque un saut bizarre dans Safari

J'ai construit un curseur d'image qui utilise jquery pour créer une "boucle" d'images. Si vous allez vers la droite, la première image est ajoutée à la fin. Si vous allez à gauche, la dernière image est prise en compte au début. La valeur margin-left est utilisée pour créer un look glissant. Il semble fonctionner jusqu'à présent, mais dans Safari l'animation de la marge ne fonctionne pas. Il devrait utiliser une fonction d'accélération pour faciliter entre -100px et -200px. Mais il y a des valeurs sur 4000px.jquery animation de marginLeft provoque un saut bizarre dans Safari

Il y a d'autres personnes qui ont ces problèmes de saut dans Safari, mais je n'ai trouvé aucune solution.

Voici les js:

window.onload = function() 
{ 
$inner = $('#wdgt_slider #inner'); 
$active = $('#wdgt_slider').children().first(); 
$slides = $('#wdgt_slider').children().length; 

$inner.prepend($inner.children().last()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft':'-100%'}); 

$('#wdgt_slider').delegate('input[type=radio]', 'change', function() 
{ 
    if($(this).attr("checked") == "checked") 
    { 
     if($(this).index() == ($inner.children().length-1) && $active.index() == 0) 
     { 
      prev(); 
     } 
     else if($(this).index() == 0 && $active.index() == ($inner.children().length-1)) 
     { 
      next(); 
     } 
     else if($(this).index() < $active.index()) 
     { 
      prev(); 
     } 
     else if($(this).index() > $active.index()) 
     { 
      next(); 
     } 
     $active = $(this); 
    } 
}); 
} 

function next() 
{ 
$inner.animate({ 
    marginLeft:"-200%" 
},8000, $.easie(0.77, 0, 0.175, 1),function() 
{ 
    //$inner.append($inner.children().first()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft': "-100%"}); 
}); 
} 

function prev() 
{ 
$inner.animate({ 
    marginLeft:"0" 
},8000, $.easie(0.77, 0, 0.175, 1), function() 
{ 
    $inner.prepend($inner.children().last()).css('marginLeft', '-100%'); 
}); 
}

je ne faisais pas un violon, parce que le problème est plus évident à l'intérieur du système de grille 960. Voici le lien: http://www.goldentree.de/wordpress/

Source

2013-01-15 Sebastian Starke

$ inner.append (...); est commenté, pour le rendre plus facile à se concentrer sur le problème. L'animation est réglée sur 8sec, pour le rendre plus facile à regarder. –

J'ai découvert, que Safari semble avoir des problèmes avec des marges négatives. Si j'utilise des valeurs positives, cela fonctionne comme prévu. Y a-t-il quelque chose que je puisse faire contre ce comportement ou dois-je trouver une solution sans marge négative? –

Pour éviter ce problème, utilisez CSS Transitions pour les navigateurs modernes et jQuery animez pour le reste. Je recommande d'utiliser modernizr pour reconnaître qui supporte CSStransitions.

if(!Modernizr.csstransitions){ 
    $('#gallery .slides').animate({"margin-left":'-200%'}, 750); 
} else { 
    $('#gallery .slides').css({"margin-left":'-200%'}); 
}

Source

2013-01-24 22:11:26

Ça marche plutôt bien! Je vous remercie. Je n'ai pas essayé parce que je pensais que la valeur négative était le problème. –

Je pense que techniquement, la valeur négative est le problème lorsqu'il est combiné avec Safari 5 et jQuery animer. Cette approche supprime simplement la partie animée jquery de l'équation. Content que ça a marché. –

Juste ma version de la réponse de @ Jason.

cssOrAnimate = Modernizr.csstransitions ? 'css' : 'animate'; 
$('#gallery .slides')[cssOrAnimate]({marginLeft:'-200%'});

Source

2013-01-24 22:22:36 Fresheyeball

jquery animation de marginLeft provoque un saut bizarre dans Safari

Répondre

Questions connexes