Question

我试图让两个不同的div分别上下滑动而不点击。现在我正试图向上滑动它不起作用。我正在使用这个：

<script type="text/javascript">
  $(document).ready(function(){
    $('#cover').hide();
    $('#cover').slideUp(300).delay(800).fadeIn(400);
  });
</script>

然后我有一个div id="cover"，里面有内容。 fadeIn有效，但不会向上滑动。有没有办法没有点击这样做？

所有帮助都会很棒！

Answer 1

您可以使用javascript更改div的位置并使用css进行转换/动画

Answer 2

就像@Mike Edwards所说，slideUp()用于隐藏，slideDown()用于显示。您可能希望使用slideDown()，但如果您要同时使用slideDown()和fadeIn()，我认为无法完成（即使使用delay()或设置queue:false）。

我与slideDown()和.animate('opacity')达到了类似的效果。

$('#cover').hide().css({'opacity':0});

$('#cover').slideDown('slow').animate({opacity:1}, {queue:false, duration:'slow'});

以下是jsfiddle

Answer 3

显然确保加载JQuery。（你没有得到'$ is not defined'错误）您可以使用“After”触发器来链接操作。

如果你的目标是slideUp和slideDown，你可以这样做。

    $('#cover').slideUp(300).after(function() { 
        $(this).slideDown(300);
    });

要查看此操作：http://jsfiddle.net/U3LVR/

Answer 4

如果你有两种不同的div和两种动画，你可以在每个效果中使用回调或使用promise来确保所有效果都已完成。

例如：

<script type="text/javascript">
  $(document).ready(function(){
    $('#div1').slideUp(300).promise().done(function() {
       $('#div2').fadeIn(400, function() {
          //your next code here...
       });
    });
  });
</script>

可以div .slideUp没有点击

4 个答案: