jQuery 선택기 samba

Question

이것은 stackoverflow, hello everyone의 내 첫 번째 게시물입니다!

jQuery 애니메이션으로의 첫 번째 벤처는 두 개의 div, 즉 상반기와 하반기에 이미지 집합을 가지고 플립형 전환으로 플립 다운 전환과 함께 고대 시계를 회전시키는 것입니다. 다운 번호.

애니메이션이 다운되었지만 문제가 페이지에서 동시에 애니메이션을 생성하는 중 하나 이상을 가지고 있습니다. 내 문제는 jQuery 선택기의 범위를 이해하지 못하는 데서 비롯된다. 이 내가 설명 이미지 세트에서 실행되는

$(document).ready(function(){ 
    flippers($('.flipper')); 
}); 

function flippers(divs){ 
    divs.each(function(i){ 
    $(".top_container img").each(function (j){ 
    $(this).attr("id",i+"t"+j); 
    }); 
    $(".bottom_container img").each(function(j){ 
    $(this).attr("id",i+"b"+j); 
    }); 
    }); 
    var flip_wait = 3600; 
    setTimeout("flippers_start("+flip_wait+")",flip_wait); 
} 

function flippers_start(time,flipper){ 
    var curr_top = '#' + $('.top_container img:visible').attr('id'); 
    var curr_bottom = '#' + $('.bottom_container img:visible').attr('id'); 
    if(($('.top_container img').size() - 1) <= curr_top[3]){ 
    var next_top = curr_top.substring(0,3) + 0; 
    var next_bottom = curr_bottom.substring(0,3) + 0; 
    } 
    else{ 
    var next_top = curr_top.substring(0,3) + (parseInt(curr_top[3]) + 1); 
    var next_bottom = curr_bottom.substring(0,3) + (parseInt(curr_bottom[3]) + 1); 
    } 

    var height = $(curr_top).height(); 
    var width = $(curr_top).width(); 

    flip(height,width,curr_top,curr_bottom,next_top,next_bottom); 
    setTimeout("flippers_start("+time+")",time); 
} 

    function flip(height,width,fromtop,frombottom,totop,tobottom){ 
    var fliptime = 250; 

    $(frombottom).css("z-index","1"); 
    $(tobottom).css("z-index","2"); 
    $(fromtop).css("z-index","2"); 
    $(totop).css("z-index","1"); 

    $(tobottom).css("height","1px").show(); 
    $(totop).show(); 
    $(fromtop).stop().animate({height:'0px',width:''+width+'px',marginTop:''+height+'px'},{duration:fliptime}); 
    window.setTimeout(function() { 
    $(tobottom).stop().animate({height:''+height+'px',width:''+width+'px',marginBottom:'0px',opacity:'1'},{duration:fliptime}); 
    },fliptime-40); 
    $(frombottom).slideUp(); 
    window.setTimeout(function(){ 
    $(fromtop).height(height).hide().css("margin-top","0px"); 
    },fliptime*2); 

} 

, 그것이 내가 그것을 기대 다만 방법을 작동

<div class="flipper"> 
<div class="top_container"> 
<img src="images/pink_floyd_img/dark1.jpg" class="top first" /> 
<img src="images/pink_floyd_img/wall1.jpg" class="top second hidden" /> 
<img src="images/pink_floyd_img/wish1.jpg" class="top third hidden" /> 
</div> 
<div class="bottom_container"> 
<img src="images/pink_floyd_img/dark2.jpg" class="bottom first" /> 
<img src="images/pink_floyd_img/wall2.jpg" class="bottom second hidden" /> 
<img src="images/pink_floyd_img/wish2.jpg" class="bottom third hidden" /> 
</div> 
</div> 

. 그러나 "플리퍼"div를 복제하면 애니메이션이 첫 번째 세트에서 먼저 실행 된 다음 두 번째 세트에서 실행됩니다.

나는 애니메이션을 적용 할 각 이미지를 선택하는 방식과 관련이 있다는 것을 알고 있습니다. 그것이 일어날 때, 그러나 나는 정말로 내가하는 일을 어떻게 해야할지 모르겠다.

궁극적 인 목표는 div와 이미지를 적절한 클래스로 마크 업하고 애니메이션을 실행하기 위해 동적으로 설정하고 애니메이션을 동시에 시작할 수있게하는 것입니다. 각각의 div에 대해 별도의 호출이 있어도 (이렇게되면 결국 모든 것이 동시에 전환되지 않습니다.)

감사합니다.

Answer 1

이것은 또한 StackOverflow에서 처음입니다. 내가 도울 수 있기를 바랍니다.

귀하가해야한다고 생각하는 것은 페이지의 각 플리퍼에 대해 flippers_start()에 개별적으로 전화하는 것입니다. 이미 해당 기능에있는 flipper arg를 사용할 수 있습니다. 그 결과는 아래와 같습니다 :

function flippers(divs){ 
    var flip_wait = 3600; 
    divs.each(function(i){ 
     var flipper = $(this); 
     flipper.find(".top_container img").each(function (j){ 
      $(this).attr("id",i+"t"+j); 
     }); 
     flipper.find(".bottom_container img").each(function(j){ 
      $(this).attr("id",i+"b"+j); 
     }); 
     setTimeout(function(){ 
      flippers_start(flip_wait, flipper); 
     },flip_wait); 
    }); 
} 

내가 setTimeout 전화를 변경하고 그래서 각 $('.flipper')에 대해 실행 년대 처음 each() 안에 넣어. 또한 현재 플리퍼 내의 이미지 만 선택하려면 $(".top_container img") 대신 flipper.find(".top_container img")을 사용하고 flippers_start()의 두 번째 인수로 flipper을 전달합니다. 나는 현재 플리퍼 사업부 내에서 이미지 만 선택 flipper을 계속 사용하고 이전 setTimeout 전화를 변경 위의 함수에서

function flippers_start(time,flipper){ 
    var curr_top = '#' + flipper.find('.top_container img:visible').attr('id'); 
    var curr_bottom = '#' + flipper.find('.bottom_container img:visible').attr('id'); 
    if((flipper.find('.top_container img').size() - 1) <= curr_top[3]){ 
     var next_top = curr_top.substring(0,3) + 0; 
     var next_bottom = curr_bottom.substring(0,3) + 0; 
    } 
    else{ 
     var next_top = curr_top.substring(0,3) + (parseInt(curr_top[3]) + 1); 
     var next_bottom = curr_bottom.substring(0,3) + (parseInt(curr_bottom[3]) + 1); 
    } 

    var height = $(curr_top).height(); 
    var width = $(curr_top).width(); 

    flip(height,width,curr_top,curr_bottom,next_top,next_bottom); 

    setTimeout(function(){ 
     flippers_start(time, flipper); 
    },time); 
} 

.

이 정보가 도움이되기를 바랍니다.

나는 방금 쓴 내용에서 찾을 수있는 철자법이나 문법 오류에 사과합니다. 나는 영어 원어민이 아니다.

Answer 2

애니메이트() 함수의 특성은 다음 옵션

animate(params, options) 

하나는 애니메이션 큐 (true)에 추가되어야하는지 여부를 애니메이션에게 즉시 (false)에 실행되는, queue이다.예 :

$('#myelement').animate({ left: "50px", opacity: 1 }, { duration: 500, queue: false }); 

해당 코드는 애니메이션에 비동기 적으로 실행되도록 지시합니다.

자세한 내용은 http://docs.jquery.com/Effects/animate#paramsoptions을 참조하십시오.