эффект молнии с использованием php/jQuery типа «zipper google doodle»

Question

Можно ли сделать эффект застежки-молнии на странице, используя jquery, а не flash?

, например, следующие, но без вспышки (и сидя вертикально): http://activeden.net/item/interactive-zipper/92456

лучшее, что я могу сделать, это получить свой почтовый индекс, чтобы идти вниз, а затем 2-х сторон открытое скольжение по горизонтали лол, но я не очень хорошо в JQuery бизнес лол

Любая помощь или совет будет весьма признателен,

моя попытка,

$("#openbox").click(function() { 

    $("#openbox").stop().delay(0).animate({ 
     "top": "+=600px" 
    }, 600); 
    $curtainopen = false; 

    $(".leftcurtain").stop().delay(600).animate({ 
     "left": "-=380px" 
    }, 3000); 

    $(".rightcurtain").stop().delay(600).animate({ 
     "right": "-=390px" 
    }, 3000); 

    $curtainopen = true; 

    return false; 
}); 

CSS

#openbox { 
    width:38px; 
    height:100px; 
    background-image:url(images/zip.png); 
    position:absolute; 
    top:100px; 
    left:420px; 
    z-index:6 
} 
.leftcurtain { 
    width: 50%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    position:absolute; 
    background-position:right; 
    z-index: 5; 
    background-image:url(images/frontcurtain-left.jpg); 
    background-repeat:no-repeat; 
} 
.rightcurtain { 
    width: 52%; 
    height: 100%; 
    right: 0px; 
    top: 0px; 
    position: absolute; 
    z-index: 5; 
    background-image:url(images/frontcurtain-right.png); 
    background-repeat:no-repeat; 
} 
.rightcurtain img, .leftcurtain img { 
    width: 100%; 
    height: 100%; 
} 

Answer 1

Да ... Я вообще ничего сказать возможно в JQuery, что можно сделать вспышку. Но у вас могут быть проблемы с более старыми браузерами. Вот один из возможных способов сделать это.

Вам нужны 3 изображения.

1. молния ручка и рот
2. изображение верхней линии почтового индекса
3. изображение нижней линии почтового индекса

В принципе, вы бы иметь черный DIV поверх 2 молнии изображений , при этом ручка/рот располагаются посередине. Вам нужно изменить ширину черного div, когда молния перемещена влево, и измените положение двух изображений на молнии слева по отношению к этому движению. Установите переполнение контейнеров изображений и blamo .... у вас есть jQuery zipper, содержимое под которым будет раскрыто, когда вы будете молчать.