2016-07-29 3 views
2

Я хочу реализовать эффект выделения, иногда идет хорошо, иногда идет не так, не знаю почему.Эффект Marquee не работает правильно

Fiddle

Мой код:

$(document).ready(function(){ 
    $(".menudepth1").children("a").click(function(){ 
     $(this).addClass("selected") 
    }) 
    function move(){ 
     var Parent=$("#left-con").find("ul"); 
     var Img=$("#left-con").find("li").eq(0); 
     var Width=Img.width(); 
     Img.animate({marginLeft:(-1*Width)+"px"},2000,function(){ 
      $(this).appendTo(Parent).css("marginLeft","0px"); 

     }) 
    } 
    setInterval(move,2000) 
}) 
+1

его работа в вашем jsfiddle – chirag

+1

Вызов обратного интервала вызывается перед завершением анимации. Вот простое исправление, которое лучше, чем использование любого интервала: https://jsfiddle.net/hpqxtdeq/2/ И здесь, если вы хотите, чтобы какая-то задержка между каждым слайдом изображения: https://jsfiddle.net/hpqxtdeq/3/ –

ответ

1

чуть чуть не связан с вопросом, но если вы хотите, чтобы код, чтобы выполнить лучше, я бы рекомендовал использовать CSS трансформирует вместо края. Причина в том, что изменение маржи заставляет всю страницу перерисовывать с каждым новым значением, а при преобразовании только перерисовывает этот элемент.

Особенно понравятся браузеры для мобильных устройств!

Here более подробно (хотя и немного длинный) статьи об этом, если вы заинтересованы! :)

Смежные вопросы