0

现在我正在开发一个响应式滑块，我正在为第一组调用动画。我的滑块是一个网格系统，在 HTML 中设置为两个 li 类。一个被标记为“负载”，另一个被称为“过渡”。

我遇到的问题是我的网站预先加载了所有内容，因此一旦加载栏完成，网格就会加载，第一个 li 类进入，“加载”，并通过animateUp 动画。

因此，当第一组进入时，它通过动画向上移动，如果用户激活下一个 li 类，它会过渡到淡入淡出。但是，我希望能够阻止我的用户通过按右箭头键而不是在第二个 li 处停止并强制用户使用后退键返回到第一个孩子和还阻止 animateUp 运行，并让第一个 li 类在 animateUp 播放后采用过渡。

这是 jsFiddle 以获得更好的想法http://jsfiddle.net/BNq6t/1/embedded/result/

您可以使用箭头键导航（右/左）

（请注意，当您回到 animateUp 播放的第一个孩子时）

的HTML

    <div id="slider">
        <ul>
        <!-- #slider js PAGE 1 -->
        <li class="load">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio5.png"> 
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio3.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio9.png">


            <img src="/wordpress/wp-content/themes/newtheme/assets/images/sample8.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/sample4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio2.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio6.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/readli.png">      

        </li>
        <!-- / PAGE 1 -->

        <!-- #slider js PAGE 2 -->
        <li class="transition">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio1.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">

            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
            <img src="/wordpress/wp-content/themes/newtheme/assets/images/portfolio4.png">
        </li>
        <!-- / PAGE 2 -->
        </ul>
    </div>

滑块

jQuery(document).ready(function ($) {

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 500, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    })
}

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 500, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    })
}

$('#back').click(function () {
    moveRight();
})
$('#next').click(function () {
    moveRight();
})

$('#next').click(function () {
  if (('#next').click = clicked) {
    ('#back:after').css('visbilility: visible;')
  }
})

$(document).keydown(function(e) {
  if (e.keyCode == 39) {
    moveRight();
  } else {

  }
})

$(document).keydown(function(e) {
  if (e.keyCode == 37) {
    moveLeft(); 
  } else {

  }
})

});

CSS

#slider li.load img:nth-child(-n+3) {
    animation: pushUp 2.4s linear;
    -webkit-animation: pushUp 2.4s linear;
    -moz-animation: pushUp 2.4s linear;
    -o-animation: pushUp 2.4s linear;
}
#slider li.load img:nth-child(4), 
#slider li.load img:nth-child(5), 
#slider li.load img:nth-child(6) {
    animation: pushUp .5s linear;
    -webkit-animation: pushUp .5s linear;
    -moz-animation: pushUp .5s linear;
    -o-animation: pushUp .5s linear;
}
#slider li.load img:nth-child(7), 
#slider li.load img:nth-child(8), 
#slider li.load img:nth-child(9) {
    animation: pushUp 1.1s linear;
    -webkit-animation: pushUp 1.1s linear;
    -moz-animation: pushUp 1.1s linear;
    -o-animation: pushUp 1.1s linear;
}
#slider li.transition img {
    animation: fadeIn .55s;
    -webkit-animation: fadeIn .55s;
            -moz-animation: fadeIn .55s;
            -o-animation: fadeIn .55s; 
}

谢谢。（关于图像，这篇文章中的代码与 jsFiddle 中的代码不同）

4

1 回答 1

1

有一个iteration-count属性。

你可以用那个。

以下是所有“无前缀”属性：

animation-name:  
animation-duration:  
animation-iteration-count:
animation-direction:  
animation-timing-function:     
animation-fill-mode:  
animation-delay:

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

于 2013-10-26T16:20:27.027 回答