Автоматизированный Аккордеон - PullRequest
Новая
       12

Автоматизированный Аккордеон

1 голос
/ 30 ноября 2010

Я пытаюсь сделать аккордеонное меню автоматически, и каждая вещь, которую я продолжаю находить, очень расплывчата в инструкциях.Я нашел пару ответов, в которых говорилось, что я могу использовать цикл плагин для циклического прохождения, вот что я пытался сделать.Я не могу заставить функцию цикла работать должным образом.Правильно ли я поступаю, и если да, то, что я пропустил в своем коде?

Я очень новичок в 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>

1 Ответ

1 голос
/ 30 ноября 2010

Так что я не уверен, что это именно то, что вы ищете, но я написал быстрое решение, которое, надеюсь, поможет вам добраться до вашего решения:

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> с постепенным изменением числа в конце.

Посмотрите, как это работает: http://jsfiddle.net/Ck3aZ/

...