Zasłonka w javascript:)

Chciałem sobie zrobić na stronie taki efekcik jak tutaj:

http://www.kinga.com.pl/o-nas

Chodzi o to zdjęcie na dole z "żaluzją" którą można zamykać i otwierać. Zrobiłem to w ten sposób.

http://jsfiddle.net/...o83/v68k8vst/1/

Mam 2 pytania.

Po pierwsze czy da się to jakoś zrobić inaczej nie korzystając z dwóch zewnętrznych bibliotek i requestAnimationFrame(). Chodzi mi o ogólną wydajność bo mam wrażenie, że to jest trochę przyciężkie.

Po drugie nie bardzo to chce działać pod IE i Chrome (tzn niby działa ale zdjęcie, które powinno być przycięte pojawia się jako pierwsze i dopiero po kliku znika). O co tu chodzi?

A czy nie prościej zrobić dwie grafiki jedna nad drugą (z-index) i tą która jest na wierzchu poczęstować tym https://jqueryui.com/resizable/ ?

Wygląda na to, że faktycznie prościej ale da się to zablokować żeby się tylko "resajzowało" wzdłuż osi x? No i żeby się zmniejszało do 0px tzn, żeby całkowicie odsłonić zdjęcie pod spodem?

No ja myślę że spokojnie się da

Co do po OX to nie pamiętam dokładnie, jeżeli nie ma takiej opcji to wystarczy max/min height ustawić na to samo i będzie.

Całkowite odsłonięcie też się da wykonać Wystarczy dać np element z wierzchu zrobić np 10px szerszy (żeby wystawał z lewej strony) i ustawić min-width na 10px

Sprytnie kombinujesz dzięki za wskazówki

Chyba jednak nie o to chodzi. Jak zacząłem testować ten sposób z resize to dopiero zobaczyłem, że przecież to zdjęcie będzie się zmniejszać i wtedy nie ma tego efektu na jakim mi zależy:/

http://codyhouse.co/...ider/index.html
http://codyhouse.co/...parison-slider/

 

O widzisz na ten sposób bym nie wpadł . Jeśli to miałeś unbreak na myśli to totalnie nie zrozumiałem o co Ci chodziło

Dokładnie o takie rozwiązanie, tylko z wykorzystaniem resizable z jquery-ui