fadeIn() не использует мое позиционирование css

Question

Я работаю над сайтом, на котором отображаются только много предметов (изображений), которые вы можете перетащить. & drop. До сих пор так хорошо мой JS является:

<script type="text/javascript"> 
    $(function() { 
     $(".draggable").pep(); 
    }); 
</script> 

HTML является:

<img class="draggable" id="item_1" onload="this.width/=2;this.onload=null;" src="http://www.cyrill-kuhlmann.de/img/01.png"/> 

И CSS является:

#item_1 { 
    position: fixed; 
    left: 300px; 
    top: 150px; 
    z-index: 2; 
} 

Вот так, как я обрабатывать все объекты на сайте ... Но если я хочу добавить fadeIn() для каждого элемента, так что они deIn один за другим ... JS больше не заботится о моем позиционировании CSS ... Он исчезает во всех объектах в «left: 0px; top: 0px» ... Почему? Как я могу это исправить?

Это мой JS код с этой FadeIn():

<script type="text/javascript"> 
    $(function() { 
     $(".draggable").hide(); 
     $(".draggable").each(function(index) { 
      $(this).delay(800).delay(50*index).fadeIn(400); 
     }); 
    }); 

    $(function() { 
     $(".draggable").pep(); 
    }); 
</script> 

Здесь вы можете получить впечатление: http://www.cyrill-kuhlmann.de/play.html

Спасибо за любую помощь!

Answer 1

Я не уверен, можете ли вы изменить поведение функции fadeIn. Вместо этого я бы рекомендовал использовать Переходы CSS. Вы можете установить непрозрачность по умолчанию opacity: 0, а затем установить переход с transition: opacity 200ms.

Теперь вам нужно просто применить класс к каждому из элементов с небольшой задержкой между ними, например: jsFiddle.

Answer 2

latest version of jquery.pep.js имеет startPos вариант, или будет автоматически распознавать свойства CSS left и top. В любом случае, все, что вам нужно, это обновление до плагина.

http://jsfiddle.net/mblase75/haskbkqz/1/