动画元素jquery

我有一个幻灯片显示循环通过图像，然后在这些图像上我有一些文本，然后两个图像。我想要的是制定哪些图像，我试图动画和这样做，但是我想在每个动画之间有一个延迟。动画元素jquery

我的困难是我有3张幻灯片，每张幻灯片可以有2张图片需要独立背景进行动画，幻灯片的安排是基于用户偏好进行排列的，所以从前端角度来看，我永远不能100％确定哪两个图像将被组合在一起，因为这个原因，我写了下面，

if($(".current .iphone").length) { 
     $(".current .iphone").animate({ 
      opacity : 1, 
      left : "840px" 
     }, 800); 
    } 
    if($(".current .blackberry").length) { 
     $(".current .blackberry").animate({ 
      opacity : 1, 
      left : "1119px" 
     }, 800); 
    } 
    if($(".current .samsung").length) { 
     $(".current .samsung").animate({ 
      opacity : 1, 
      left : "783px" 
     }, 800); 
    } 
    if($(".current .htc").length) { 
     $(".current .htc").animate({ 
      opacity : 1, 
      left : "900px" 
     }, 800); 
    } 
    if($(".current .nokia").length) { 
     $(".current .nokia").animate({ 
      opacity : 1, 
      left : "823px" 
     }, 800); 
    } 
    if($(".current .nokia").length) { 
     $(".current .nokia").animate({ 
      opacity : 1, 
      left : "823px" 
     }, 800); 
    }

这里是我的HTML，

<div id="slideshow" role="main" style="position: relative; overflow: hidden; "> 
     <section data-background="_/images/elements/parralex-1.jpg"> 
      <img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" /> 
      <img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" /> 
     </section> 
     <section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg"> 
      <img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" /> 
      <img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" /> 
     </section> 
     <section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg"> 
      <div class="samsung foreground"></div> 
      <div class="nokia foreground"></div> 
     </section> 
    </div>

基本上我在做什么正在设法确定哪些图像存在于图像中租幻灯片，然后动画然后，但是目前这两个图像同时动画，我想有一个动画，然后下一个图像之间的随机延迟。

有没有更好的方式来做我正在做的事情？

来源

2012-07-20 Udders

在您的html中没有名为'current'的类。 – 2012-07-20 12:06:58

你能告诉我们一个有效的html吗？ – 2012-07-23 13:23:27

你可以尝试这样的：

 $.each($('#slideshow').find('img'), function(i, img){ 
      if($(img).hasClass('iphone')){ 
       setTimeout(
        function(){ 
         $(img).animate({ 
          opacity : .5, 
          'margin-left' : "+=40px" 
         }, 800) 
        }, Math.random() * i *800); 
      } 
      if($(img).hasClass('blackberry')){ 
       setTimeout(
        function(){ 
         $(img).animate({ 
          opacity : .5 
          'margin-left' : "-=40px" 
         }, 800) 
        }, Math.random() * i *800); 
      } 
    });

反正这里有一些例子，看看THIS例如。

来源

2012-07-20 14:22:18

我并不完全明白你想做什么，但我改变了你的jQuery结构。

您需要定义一个trrigger /事件为这次行动，像hover()，或click()

使用这种少代码：

$('.current').hover(function() {//mouse over event 

    var currentClass = $(this).children().attr('class');//takes mouse overed element's chlid's class 

    if($('.current .'+currentClass).length) { 
      $(".current ."currentClass).animate({ 
       'opacity' : '1', 
       'left' : '840px' 
      }, 800); 
    } 
});

如果你不想定义触发事件，则可以使用each()方法与setInterval()定时动画。

来源

2012-07-20 11:53:38

好极了，但每个img都没有相同的左值。 – Udders 2012-07-20 11:56:57

再次阅读，我更新我的答案。您必须定义事件。 – 2012-07-20 11:59:02

这不会工作...我不希望用户必须点击或悬停 – Udders 2012-07-20 12:01:38

动画元素jquery

回答

相关问题