자동화 된 아코디언

Question

아코디언 메뉴를 자동으로 순환 시키려고 노력하고 있으며, 계속 찾는 모든 사항은 지침에 대해 매우 모호합니다. Cycle Plugin을 통해 사이클을 사용할 수 있다고 대답 한 몇 가지 답변을 찾았습니다. 그래서 제가 시도한 바입니다. 나는 제대로 작동 사이클 기능을 얻을 수 없습니다. 내가 올바른 방향으로 나아갈 것인가? 그렇다면 내 코드에서 무엇을 놓쳤는가?

저는 jQuery에서 매우 새롭습니다. 그래서이 모든 것이 저에게 다소 압도적입니다. 감사. 이것이 당신이 찾고있는 정확하게 경우

<script type="text/javascript" > 
$(document).ready(function(){ 
lastBlock = $("#a1"); 
maxWidth = 380; 
minWidth = 50; 

$("#slide ul li a").hover(
    function(){ 
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 }); 
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400}); 
lastBlock = this; 
    } 
); 
}); 
$(function() { 
$('#slide').cycle({ 
    fx:  'slideY', 
    easing: 'bounceout', 
    delay: -4000 
}); 
}); 
    </script> 

<div id="slide" class="cycle"> 
<ul> 
    <li> 
    <a id="a1"> 
     <img src="image" /> 
    </a> 
    </li> 
    <li> 
    <a> 
     <img src="image" /> 
    </a> 
    </li> 
    <li> 
    <a> 
     <img src="image" /> 
    </a> 
    </li> 
    <li> 
    <a> 
     <img src="image" /> 
    </a> 
    </li> 
</ul> 
</div> 

Answer 1

그래서 잘 모르겠어요,하지만 난 희망 당신이 당신의 솔루션을 얻을 수 있도록 빠른 솔루션을 썼다 :

HTML

<div id="slide" class="cycle"> 
    <ul> 
     <li> 
      <a id="a1"> 
       <img src="image" /> 
      </a> 
     </li> 
     <li> 
      <a id="a2"> 
       <img src="image" /> 
      </a> 
     </li> 
     <li> 
      <a id="a3"> 
       <img src="image" /> 
      </a> 
     </li> 
     <li> 
      <a id="a4"> 
       <img src="image" /> 
      </a> 
     </li> 
    </ul> 
</div> 

jQuery를

var lastBlock = $("#a1"); 
var maxWidth = 166; 
var minWidth = 35; 
var counter = 0; 
var myInterval = 0; 

$("#slide ul li a").mouseenter(

function() { 
    $(lastBlock).animate({ 
     width: minWidth + "px" 
    }, { 
     queue: false, 
     duration: 400 
    }); 
    $(this).animate({ 
     width: maxWidth + "px" 
    }, { 
     queue: false, 
     duration: 400 
    }); 
    lastBlock = this; 
    clearInterval(myInterval); 
}).mouseleave(function() { 
    myInterval = setInterval(doSomething, 4000); 
}); 

function doSomething() { 
    var i = counter++ % 4 + 1; 
    $("#a" + i).trigger("mouseenter"); 
    $("#a" + i).trigger("mouseleave"); 
} 

myInterval = setInterval(doSomething, 4000); 

따라서이 솔루션에서 간격은 순환하여 이벤트 mouseenter() 및 mouseleave()을 트리거하도록 설정됩니다. 마우스가 요소 위에있는 동안 이미지 순환을 원하지 않을 수 있으므로 간격은 mouseenter()에서 지워지고 mouseleave() 동안 다시 설정하십시오. 리팩토링 될 수있는 혼란스러운 부분은 모듈러스 연산이있는 카운터를 사용하여 이미지를 순환하는 방식입니다. 끝에 <a>에 ID를 추가하면 점차적으로 번호가 변경됩니다.

여기에서 작업하십시오 : http://jsfiddle.net/Ck3aZ/