JQuery анимировать и парить - PullRequest
Новая
       24

JQuery анимировать и парить

2 голосов
/ 07 декабря 2011

Я пытаюсь создать анимацию в jquery, 

#wrapper_map div { width:94px; height:265px; float:left; cursor:pointer; position:relative;}
img.main {position: absolute;left:0;top:0;z-index:10;}
img.hover {position:absolute;left:0;top:0;}

<div id="wrapper_map">
     <div class="map1"><a  href="#"><img class="main" src="1.gif" ><img class="hover" src="h_1.gif"></a></div>
    <div class="map2"><a  href="#"><img class="main" src="2.gif" ><img class="hover" src="h_2.gif"></a></div>
    <div class="map3"><a  href="#"><img class="main" src="3.gif" ><img class="hover" src="h_3.gif""></a></div>
    <div class="map4"><a  href="#"><img class="main" src="4.gif" ><img class="hover" src="h_4.gif"></a></div>
    <div class="map5"><a  href="#"><img class="main" src="5.gif" ><img class="hover" src="h_5.gif"></a></div>
</div>

С помощью этой функции img.hover отображается при наведении курсора.Это первая рабочая часть. 

$("#wrapper_map img.main").hover(function() {
        $(this).animate({"opacity": "0"},100);
    }, function() {
        $(this).animate({"opacity": "1"},100);
});

Теперь я хотел бы сделать бесконечную анимацию: 

Show then hide ".map1 img.hover" when it's finish,
Show then hide ".map2 img.hover" when it's finish,
Show then hide ".map3 img.hover" when it's finish,
Show then hide ".map4 img.hover" when it's finish,
Show then hide ".map5 img.hover" when it's finish, resart the animation.

Но мне это нужно, когда мышь наводится на div (.map1,.map2 и т. д.), чтобы показать отображение класса img div.Когда мышь завершает работу, div wrapper_map перезапускает бесконечную анимацию.

Я действительно хочу сделать что-то подобное, но мне нужна помощь, пожалуйста !!

Большое спасибо

Ответы [ 2 ]

0 голосов
/ 07 декабря 2011

Вы можете сделать это: 

option.imgs.filter(':visible').hide();
option.imgs.eq(index).show();

, затем контролировать индекс ++

0 голосов
/ 07 декабря 2011

Jquery http://api.jquery.com/animate/ функция имеет параметр complete complete: функция, вызываемая после завершения анимации. теперь для бесконечной анимации после завершения анимации вы можете вызывать другую функцию, у которой есть animate ии так, чтобы сделать бесконечную анимацию.

...