Question

我正在尝试建立一个jquery手风琴画廊，我设法建立了具有所有相关悬停效果的画廊，

现在我希望它在用户没有悬停在任何部分时自动播放，但我不知道如何启动（我只知道如何让元素响应Jquery中的鼠标操作）

您可以在Jsfiddle中看到图库 - http://jsfiddle.net/eyalbin/zcT9E/

代码 - html

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
    <div class="fifth"></div>
</div>

代码 - css

.container { width: 800px; height: 400px; background: white; border: 1px black solid; margin: 0 auto; position: relative; overflow:hidden; }
.first { width: 400px; height: 400px; background: red; position: absolute; }
.second { width: 400px; height: 400px; background: blue; position: absolute; left: 100px;  }
.third { width: 400px; height: 400px; background: green; position: absolute; left: 200px; }
.fourth { width: 400px; height: 400px; background: purple; position: absolute; left: 300px; }
.fifth { width: 400px; height: 400px; background: yellow; position: absolute; left: 400px; }

代码 - jquery：

<script>
$(".fifth").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"200px"}, 200);
    $('.fourth').animate({"left":"300px"}, 200);
    $('.fifth').animate({"left":"400px"}, 200);
});


$(".fourth").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"200px"}, 200);
    $('.fourth').animate({"left":"300px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});


$(".third").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"200px"}, 200);
    $('.fourth').animate({"left":"600px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});

$(".second").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"500px"}, 200);
    $('.fourth').animate({"left":"600px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});

$(".first").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"400px"}, 200);
    $('.third').animate({"left":"500px"}, 200);
    $('.fourth').animate({"left":"600px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});
</script>

提前致谢，的Eyal

Answer 1

的 Live demo 的

$(function() { // DOM ready var $sl = $(".slide"), x = 100, // each position at += X d = 300, // anim distance s = 500, // animation speed p = 2500, // pause between animations c = 0, // set Current slide number n = $sl.length, sI; $sl.hover(function(e) { anim($(this).index()); return e.type.match('t') ? clearInterval(sI) : loop(); }); function anim(cc,ss) { $sl.each(function(i,e){ $(e).stop().animate({left: i>(c=cc%n)? d+i*x : i*x },ss||s); }); } function loop() { sI = setInterval(function(){ anim(++c); },p); } anim(c,1); loop(); });

_{简化HTML ：}

<div class="container"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div>

_{Simplified CSS :(是的，即使CSS也很有趣，jQuery会设置所需的位置！）}

.container{ position: relative; overflow:hidden; margin: 0 auto; width: 800px; height: 400px; border: 1px solid black; } .slide{ left: 0; width: 400px; height: 400px; position: absolute; } .slide:nth-child(1){ background:red; } .slide:nth-child(2){ background:blue; } .slide:nth-child(3){ background:green; } .slide:nth-child(4){ background:purple; } .slide:nth-child(5){ background:yellow; }

Answer 2

我实现了一个简单的例子，它使用setInterval来自动扩展accordion。

并声明一个isInterrupted标志以指示是否应该停止自动扩展。

尝试像这样更新你的JS：

JS

function expand(index){
  $('.first').animate({"left":"0px"}, 200);
  $('.second').animate({"left":(index<1?400:100)+"px"}, 200);
  $('.third').animate({"left":(index<2?500:200)+"px"}, 200);
  $('.fourth').animate({"left":(index<3?600:300)+"px"}, 200);
  $('.fifth').animate({"left":(index<4?700:400)+"px"}, 200);
}

var isIterrupted=false;
var playInterval = 1000;
$(function(){
  var $frames=$(".frame");
  var index=0;//the pointer of current expand frame
  var runner = setInterval(function(){
    if(isIterrupted){
        clearInterval(runner);
    }
    expand(index);
    index++;
    index%=$frames.length;  //circular auto-expand
  },playInterval);

  $frames.hover(function(){
    isIterrupted=true;  //stop auto-expand
    $frames.stop();
    expand($(this).index());
  });
});

JSFiddle DEMO

此示例基于您的“手风琴”实现。

我认为这不是唯一的方法。

希望这对你有所帮助。

如何自动动画jquery库

2 个答案: