CODEWITHSUNDEEP
jqueryjquery-pluginsaccordioncycle
Katie
Katie

Reputation: 39

Automated Accordion

I am trying to make an accordion menu automatically cycle through, and every thing I keep finding is very vague about instructions. I have found a couple of answers that said I could use the cycle plugin to cycle through, so that's it what I've attempted. I'm not able to get the cycle function working properly though. Am I going about it the right way, and if so what have I missed in my code?

I am very new at jQuery, so all of this is a little overwhelming for me. Thanks.

<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>

Upvotes: 1

Views: 585

Answers (1)

tinifni
tinifni

Reputation: 2392

So I'm not sure if this is exactly what you are looking for, but I wrote a quick solution to hopefully help you get to your solution:

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);

So in this solution, an interval is set to cycle through and trigger the events mouseenter() and mouseleave(). Since you might not want the images cycling while your mouse is over an element the interval is cleared upon mouseenter() and set up again during mouseleave(). A confusing part that could be refactored is the way it cycles through the images using a counter with a modulus operation. Note that I added an ID to each <a> with an incremental change to the number at the end.

See it working here: http://jsfiddle.net/Ck3aZ/

Upvotes: 1

Related Questions